Directory

← Back

sanitize-element

Element wrapper for the Sanitize.js library (a whitelist-based HTML sanitizer)

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/howking/sanitize-element on 2019-05-22 ]

Build Status Published on webcomponents.org Polymer2.0 ES6

<sanitize-element>

Element wrapper for the Sanitize.js library (a whitelist-based HTML sanitizer), to use <marked-element>.

Usage

<style>
  .logo { width: 32px; }
</style>

<sanitize-element config='{
   "elements": ["img"],
   "attributes":{"img":["class","src"]},
   "protocols":{"img":{"src":["https"]}}
   }' sanitizer="{{sanitizer}}"></sanitize-element>

<marked-element sanitize sanitizer="[[sanitizer]]">
  <div slot="markdown-html"></div>
  <script type="text/markdown">
Markdown Image link `![image](url)`.

![WebComponents](https://web-components-resources.appspot.com/static/logo.svg)

You can set `class` like `<img class="logo">` and remove other attributes (e.g. onclick).

<img class="logo"
     src="https://web-components-resources.appspot.com/static/logo.svg"
     onclick="alert('WebComponents')">

Source block is escaped.

      <img class="logo"
           src="https://web-components-resources.appspot.com/static/logo.svg"
           onclick="alert('WebComponents')">

  </script>
</marked-element>

Other config like this.

<sanitize-element config='{
  "elements":["a","img"],
  "attributes":{"__ALL__":["class"], "a":["href","title"], "img":["src"]},
  "protocols":{"a":{"href":["http","https"]}}
  }' sanitizer="{{sanitizer}}"></sanitize-element>

<marked-element markdown="[[markdown]]" sanitize sanitizer="[[sanitizer]]">
  <div slot="markdown-html"></div>
</markd-element>

Note: The config attribute must be double quoted JSON.

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • sanitize#gbirke/Sanitize.js#v1.0.0
  • marked-element#PolymerElements/marked-element#^2.3.0
  • polymer#Polymer/polymer#^2.0.0
Released
2017-08-18
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

sanitize-element - Vaadin Add-on Directory

Element wrapper for the Sanitize.js library (a whitelist-based HTML sanitizer) sanitize-element - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/howking/sanitize-element](https://github.com//howking/sanitize-element/blob/v0.2.2/README.md) on 2019-05-22 ]** [![Build Status](https://travis-ci.org/howking/sanitize-element.svg?branch=master)](https://travis-ci.org/howking/sanitize-element) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/howking/sanitize-element) ![Polymer2.0](https://img.shields.io/badge/Polymer-2.0-blue.svg) ![ES6](https://img.shields.io/badge/es-6-red.svg) # <sanitize-element> Element wrapper for the [Sanitize.js](https://github.com/gbirke/Sanitize.js) library (a whitelist-based HTML sanitizer), to use [``](https://www.webcomponents.org/element/PolymerElements/marked-element). ## Usage ```html
``` Other config like this. ``` html
``` Note: The `config` attribute must be double quoted JSON. ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests ``` $ polymer test ``` Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
Online