Git Product home page Git Product logo

standards-positions's Introduction

Oparand's Positions on Emerging Web Standards

This is a repo that shows Oparand's position on emerging web standards (also could include counter proposals)

standards-positions's People

Contributors

stitchng avatar

Watchers

 avatar

standards-positions's Issues

[Trusted Types] Counter Proposal

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.