feat(web): Integrate trusted types into Vue

[Siegrift]

Trusted Types

Trusted Types (spec, introductory article) is a new experimental DOM API implemented within the WICG , with a working Chrome implementation.

The API creates a few new objects available on the global object in the browser, like most other web APIs (impl in TS and in Closure compiler).

Under certain conditions, controlled by a HTTP header (analogous to Content-Security-Policy behavior), the API can enable the enforcement - then it changes the signature of several DOM API functions and property setters, such that they accept specific object types, and reject strings. Colloquially, DOM API becomes strongly typed.

For example, with Trusted Types Element.innerHTML property setter accepts a TrustedHTML object.

Trusted Type objects stringify to their inner value. This API shape is a deliberate choice that enables existing web applications and libraries to gradually migrate from strings to Trusted Types without breaking functionality. In our example, it makes it possible to write the following:

const policy = TrustedTypes.createPolicy('foo', { 
  createHTML: (s) => { /* some validation*/; return s} 
});

const trustedHTML = policy.createHTML('bar');
anElement.innerHTML = trustedHTML

anElement.innerHTML === 'bar'

The above code works regardless if the Trusted Types enforcement is enabled or not.

Reading from the DOM is unaffected, so Element.innerHTML getter returns a string. That's for practical reasons -- web applications read from DOM more often than they write to it, and only writing exposes the application to DOM XSS risks. Typing only the setters allows us to secure web applications with minimal code changes.

Integrating Trusted Types to Vue

The integration is fairly simple as there are not many places which break when using Vue with Trusted Types. There one place though, which I am not sure if it's even called (couldn't trigger it myself). It's marked in a code with TT_TODO: ... comment. I hope someone can clarify this for me. The PR doesn't introduce any breaking changes. All of the code is applied only when the trustedTypes API is available in the global object.

What kind of change does this PR introduce? (check at least one)

• [ ] Bugfix
• [x] Feature
• [ ] Code style update
• [ ] Refactor
• [ ] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change? (check one)

• [ ] Yes
• [x] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• [x] It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• [x] All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• [x] New/updated tests are included

If adding a new feature, the PR's description includes:

• [x] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information: The PR adds support for Trusted Types only on client side, but it might be beneficial to use them also on server side. There is no DOM on server side, however we can check if the values are trusted before creating markup with dangerous attributes. This also makes the applications render the same thing on the server and on client. There is already a similar PR for this for React.

If you would like to try this change there is a really simple application with the instructions how to setup vue locally in which you can play with Trusted Types. Vue cli uses webpack for development which provides features like hot-reloading. This currently breaks, but the PR is already fired and we are waiting for review.

[Siegrift]

@yyx990803 Are the broken tests caused by my feature? They seems pretty unrelated...

[aKzenT]

Are there any plans to integrate this into vue?

[kazuma0129]

@Siegrift Is it still in progress? I arrived at this PR from the following description. https://github.com/w3c/trusted-types/wiki/Integrations#:~:text=jQuery%3A%20bug-,VueJS%3A%20Pull%20request,-Next.js%3A

[Siegrift]

Hi, thanks for the interesest.

This PR got quite stale since I first opened it. The integration implementation would likely need to be revisited now. I am not sure whether Vue is interested in having this change merged.

[Siegrift]

I think it's best to close this PR and re-implement it.

[kirill-malyhin]

@Siegrift , hi, can you assist, when we can expect to get trusted types support?

[Siegrift]

No idea, sorry.