A JavaScript library that tries to sandbox 3rd party content on a webpage.
The host page is using Bootstrap for CSS styles, which affect things
like: and <code></code>
It also comes with its own typography and helpers, e.g.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
The following box has content that's in this page, wrapped in a
<safe-guard></safe-guard> element.
<safe-guard>
Text content, no styling.
</safe-guard>
The same content from earlier, but now in a <safe-guard>. Notice that the content is from the host page & has styles applied, but now sandboxed in a safe-guard the browser default styles are used.
The host page is using Bootstrap for CSS styles, which affect things
like: and <code></code>
It also comes with its own typography and helpers, e.g.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
This <safe-guard></safe-guard> element is tagged with 'myWidget", meaning any
resource alos tagged 'myWidget' will be dragged into the safeguard fragment. In this case, a custom
stylesheet with a CSS class hopefully making this div have an orange background.
Another custom style in the same stylesheet. This paragraph should have green background, white text...
Code:
<html>
<head>
<style data-safeguard-tag="myWidget">
.custom1 {
font-family: monospace;
font-size: 22px;
font-weight: bold;
background: green;
color: white;
}
.custom2 {
font-family: 'Times New Roman', Times, serif;
font-size: 24px;
background: orange;
}
</style>
</head>
<body>
<safe-guard tag="myWidget">
<div class="custom2">
<p>This <safe-guard></safe-guard> element is tagged with 'myWidget", meaning any
resource alos tagged 'myWidget' will be dragged into the safeguard fragment. In this case, a custom
stylesheet with a CSS class hopefully making this div have an orange background.
</p>
<p class="custom1">
Another custom style in the same stylesheet. This paragraph should have green background, white text...
</p>
</div>
</safe-guard>
</body>
</html>
I should have custom styles...
<safe-guard iframe>
Force the custom element to use the iframe strategy
...
</safe-guard>
data-safeguard attribute on any element is also supportedI should have custom styles...
<div data-safeguard> Force the custom element to use the iframe strategy ... </div>
I should have custom styles...
Static document content…
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor neque quam, sed placerat ipsum rutrum at. Integer consequat consequat quam, vel elementum nisl convallis cursus. Mauris iaculis neque urna. Nulla congue laoreet mattis. Etiam molestie, libero ut aliquet tincidunt, turpis enim pretium arcu, tempor mattis nunc justo nec eros. Sed massa elit, vulputate sed massa ut, egestas pulvinar lectus. Sed pretium est id tempor luctus. Curabitur id iaculis dui. In tempor sodales semper. Aliquam sollicitudin eleifend bibendum. Suspendisse viverra augue vitae enim viverra, in pellentesque justo imperdiet. Mauris luctus suscipit erat porttitor tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor neque quam, sed placerat ipsum rutrum at. Integer consequat consequat quam, vel elementum nisl convallis cursus. Mauris iaculis neque urna. Nulla congue laoreet mattis. Etiam molestie, libero ut aliquet tincidunt, turpis enim pretium arcu, tempor mattis nunc justo nec eros. Sed massa elit, vulputate sed massa ut, egestas pulvinar lectus. Sed pretium est id tempor luctus. Curabitur id iaculis dui. In tempor sodales semper. Aliquam sollicitudin eleifend bibendum. Suspendisse viverra augue vitae enim viverra, in pellentesque justo imperdiet. Mauris luctus suscipit erat porttitor tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor neque quam, sed placerat ipsum rutrum at. Integer consequat consequat quam, vel elementum nisl convallis cursus. Mauris iaculis neque urna. Nulla congue laoreet mattis. Etiam molestie, libero ut aliquet tincidunt, turpis enim pretium arcu, tempor mattis nunc justo nec eros. Sed massa elit, vulputate sed massa ut, egestas pulvinar lectus. Sed pretium est id tempor luctus. Curabitur id iaculis dui. In tempor sodales semper. Aliquam sollicitudin eleifend bibendum. Suspendisse viverra augue vitae enim viverra, in pellentesque justo imperdiet. Mauris luctus suscipit erat porttitor tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor neque quam, sed placerat ipsum rutrum at. Integer consequat consequat quam, vel elementum nisl convallis cursus. Mauris iaculis neque urna. Nulla congue laoreet mattis. Etiam molestie, libero ut aliquet tincidunt, turpis enim pretium arcu, tempor mattis nunc justo nec eros. Sed massa elit, vulputate sed massa ut, egestas pulvinar lectus. Sed pretium est id tempor luctus. Curabitur id iaculis dui. In tempor sodales semper. Aliquam sollicitudin eleifend bibendum. Suspendisse viverra augue vitae enim viverra, in pellentesque justo imperdiet. Mauris luctus suscipit erat porttitor tempor.