There is a alternate proposal from @isocroft on TT which can be found here as a proof of concept and his thoughts around this is to help the ongoing discussions on how TT should be rolled out in browsers and also how simple the web developer experience should be. The idea is to "invert control" in a sense to make it possible to reduce the cognitive inertia that web developers today might have with the current spec direction of TT.
So, DOM sinks like innerHTML
for example have knowledge of using a registered policy santizer to act on any (perhaps potentially unsafe) HTML string passed to it. Its behavior can also be modified accordingly too.
Here is code that explains the alternate proposal
window.TrustedTypes.HTML.registerPolicySanitizer('alt-policy', function(TrustedType){
window.DOMPurify.addHook('afterSanitizeElements', function(currentNode, data, config){
// more code here
});
return function(dirty){
return window.DOMPurify.sanitize(dirty, {
USE_PROFILES: {svg: true, svgFilters: true, html: true},
ADD_TAGS: ['trix-editor'], // Basecamp's Trix Editor
ADD_ATTR: ['nonce', 'sha257', 'target'], // for Link-Able Elements / Content-Security-Policy internal <script> / <style> tags
KEEP_CONTENT:false,
IN_PLACE:true,
ALLOW_DATA_ATTR:true,
FORBID_ATTR:['ping', 'inert'], // Forbid the `ping` attribute as in <a ping="http://example.com/impressions"></a>
SAFE_FOR_JQUERY:true,
WHOLE_DOCUMENT:false,
ADD_URI_SAFE_ATTR:['href']
})
};
});
window.TrustedTypes.URL.registerPolicySanitizer('alt-policy', function(TrustedType){
return function(url, category){
// URISanity is a ficticious URL sanitizer (doesn't exist - yet)
return window.URISanity.vet(url, category);
};
})
/****=== configurations ===****/
/* blockIncludes: blocks including potentially unsafe HTML strings into the DOM hence modifying the behavior of `innerHTML` */
/*throwErrors: throws errors when the sanitizer detects unsafe HTML string content */
window.TrustedTypes.HTML.config = {
throwErrors:true,
blockIncludes:true,
reportViolation:false
};
/* blockNavigation: blocks navigating to potentially unsafe URLs hence modifying the behavior of `location.href` or `location.assign()` */
/*throwErrors: throws errors when the sanitizer detects unsafe URL string content */
window.TrustedTypes.URL.config = {
throwErrors:true,
blockNavigation:true,
reportViolation:false
};
/* In the example below, `innerHTML` throws a `TrustedTypesError` because of the "ping" attribute and also does include the HTML string into the DOM too*/
document.body.getElementsByName('wrapper')[0].innerHTML += '<a ping="https://www.evilattacker.com" href="#">Hello World!</a>';
/* This will also work for other DOM sinks and chokepoints too */
document.body.lastElementChild.insertAdjacentTML('afterbegin', '<span x=alert(0xed)>Hello there...</span>');
/* Also for this too, the behviour of assign is modified by */
document.location.assign("http://my.nopoints.edu.ng/_/profiling/28167/#section1")
<meta http-equiv="Content-Security-Policy" content="trusted-types alt-policy">
<!-- policy configurations can also be done using HTTP "Trusted-Types" reponse header or meta tag-->
<meta http-equiv="Trusted-Types" content="type-html 'block-inclusion'; type-script-url 'block-execution' 'report-violation'">
The above actually proposes programmatic configurability over declarative as it is more cheaper and also doesn't require the web developer to keep all 70 DOM sinks in mind as he/she writes code based on TT. It also proposes that types should not be proliferated to deal with each kind on data passed around on the front-end. The use of a policy trusted ( types group ) or ( types form - a he (@isocroft) calls it) might be more efficient going forward.
For example: URIs for scripts / dynamic resources / stylesheets can come under a single types group or types form : URL
So, for stylesheets, there would also be:
window.TrustedTypes.CSS.registerPolicySanitizer('alt-policy', function(TrustedType){
// code goes here
});
We would love your take on this alternate proposal on TT. The POC implementation of the above is here. You can try it out yourselves to see how it works.