Custom trusted types in Angular project-CodePudding

I have a spot in my Angular application where I do not want the Angular sanitizer to sanitize my content. My goal is to create a custom trusted type policy in my angular project. But I could not figure out what is the best practice to create one, store them and use them in code later.

I know it works by using (window as any) And doing I was doing it in a separate trusted-types-service:

export class TrustedTypesService {
  readonly fooPolicy: any;

  constructor() {
    this.fooPolicy = (window as any).trustedTypes.createPolicy('foo', (bar) => {
      // ideally some sanitizing by e.g. DOM Purify
      return bar;
    });
  }
}

But is this the right and best way to do it?

I'd appreciate any help. Thank you :)

CodePudding user response：

Trusted Types is a security feature introduced in Angular 9.0 that aims to prevent cross-site scripting (XSS) attacks. It does this by providing a strict API for creating, modifying, and sanitizing strings that are safe to use in different contexts.

Creating custom trusted types policies is a way to extend the default behavior of the Angular sanitizer to support specific needs in your application. The way you have implemented your custom policy in the TrustedTypesService looks correct, although it's worth noting that the trustedTypes property on the window object is only available if the TrustedTypesModule has been imported in your Angular app.

Here is an example of how you could use your custom fooPolicy in your Angular code:

import { TrustedTypesService } from './trusted-types-service';

@Component({
  // ...
})
export class MyComponent {
  constructor(private trustedTypesService: TrustedTypesService) {}

  foo() {
    const input = 'Some potentially unsafe string';
    const safe = this.trustedTypesService.fooPolicy.createHTML(input);
    // You can now safely use the "safe" string in your Angular templates
    // without worrying about XSS attacks.
  }
}

It's worth noting that the createPolicy method takes a second argument that specifies the type of the output of the policy. This can be either HTML, Script, ScriptURL, ResourceURL, or URL. In the example above, we have used the HTML type, which indicates that the policy creates trusted HTML strings.

Overall, the approach you have taken to creating a custom trusted type policy in your Angular app looks correct. However, it's important to understand the limitations of this approach and to use it wisely. In particular, you should be aware that a custom policy does not automatically guarantee the security of your application - it's up to you to ensure that the policy correctly sanitizes the input strings and makes them safe to use in your Angular templates.

CodePudding user response：

Yes, creating a custom trusted type policy and storing it in a service is the best way to do it in an Angular application. This approach allows you to create a single source of truth for all of your trusted type policies. This service can then be injected into any components that need to use the trusted types.

You can also use the same service to create and store multiple trusted type policies. This will allow you to have different policies for different types of data. For example, you could have one policy for sanitizing HTML, one for sanitizing URLs, and one for sanitizing user input.

It's also important to note that you should always use DOM Purify or a similar library to actually sanitize the data. This will ensure that the data is properly sanitized before being returned.

Overall, the best practice for creating and using custom trusted type policies in an Angular application is to create a service to store the policies and inject that service into any components that need to use the trusted types. This will allow you to have a single source of truth for all of your trusted type policies and ensure that your data is properly sanitized.