Code Monkey home page Code Monkey logo

trusted-types's Introduction

npm bundle size Libraries.io dependency status for latest release GitHub issues npm BrowserStack Status

Trusted Types

First time here? This is a repository hosting the Trusted Types specification draft and the polyfill code. You might want to check out other resources about Trusted Types:

Polyfill

This repository contains a polyfill implementation that allows you to use the API in all web browsers. The compiled versions are stored in dist directory.

Browsers

The ES5 / ES6 builds can be loaded directly in the browsers. There are two variants of the browser polyfill - api_only (light) and full. The api_only variant defines the API, so you can create policies and types. Full version also enables the type enforcement in the DOM, based on the CSP policy it infers from the current document (see src/polyfill/full.js).

<!-- API only -->
<script src="https://w3c.github.io/webappsec-trusted-types/dist/es5/trustedtypes.api_only.build.js"></script>
<script>
     const p = trustedTypes.createPolicy('foo', ...)
     document.body.innerHTML = p.createHTML('foo'); // works
     document.body.innerHTML = 'foo'; // but this one works too (no enforcement).
</script>
<!-- Full -->
<script src="https://w3c.github.io/webappsec-trusted-types/dist/es5/trustedtypes.build.js" data-csp="trusted-types foo bar; require-trusted-types-for 'script'"></script>
<script>
    trustedTypes.createPolicy('foo', ...);
    trustedTypes.createPolicy('unknown', ...); // throws
    document.body.innerHTML = 'foo'; // throws
</script>

NodeJS

Polyfill is published as an npm package trusted-types:

$ npm install trusted-types

The polyfill supports both CommonJS and ES Modules.

const tt = require('trusted-types'); // or import { trustedTypes } from 'trusted-types'
tt.createPolicy(...);

Tinyfill

Due to the way the API is designed, it's possible to polyfill the most important API surface (trustedTypes.createPolicy function) with the following snippet:

if(typeof trustedTypes == 'undefined')trustedTypes={createPolicy:(n, rules) => rules};

It does not enable the enforcement, but allows the creation of policies that return string values instead of Trusted Types in non-supporting browsers. Since the injection sinks in those browsers accept strings, the values will be accepted unless the policy throws an error. This tinyfill code allows most applications to work in both Trusted-Type-enforcing and a legacy environment.

Building

To build the polyfill yourself (Java required):

$ git clone https://github.com/w3c/webappsec-trusted-types/
$ cd trusted-types
$ npm install
$ npm run build

Demo

To see the polyfill in action, visit the demo page.

Testing

It can be tested by running:

$ npm test

The polyfill can also be run against the web platform test suite, but that requires small patches to the suite - see tests/platform-tests/platform-tests-runner.sh.

Cross-browser testing provided by BrowserStack.

BrowserStack

Contributing

See CONTRIBUTING.

Questions?

Our wiki or the specification may already contain an answer to your question. If not, please contact us!

trusted-types's People

Contributors

koto avatar mikesamuel avatar vrana avatar siegrift avatar dependabot-preview[bot] avatar mikewest avatar jugglinmike avatar mrdisconnect avatar foolip avatar otherdaniel avatar slekies avatar dependabot[bot] avatar koba04 avatar zemnmez avatar malvoz avatar rictic avatar paulirish avatar nitinsurana avatar marcoscaceres avatar saschanaz avatar jonathankingston avatar jyasskin avatar 0xedward avatar dontcallmedom avatar antosart avatar

Stargazers

Bader dahhan avatar

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.