Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

embed-page

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

embed-page

Proof of concept for Embeddable Progressive Application - a microapplication container, a WebComponent acting as seamless IFRAME or html include

  • 0.0.19
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8
decreased by-11.11%
Maintainers
1
Weekly downloads
 
Created
Source

<embed-page>

Proof of concept for Embeddable Progressive Application

  • a microapplication container, a WebComponent acting as seamless IFRAME and html include

NPM version Published on webcomponents.org Join the chat at https://gitter.im/embed-page/Lobby

Where to use?

<embed-page/> covers 2 extreme cases.

  1. Super-simple development with library of pre-made microapplications and plain html codebase. It assumes no web component knowledge and development.

  2. Super-complex apps where on same page need to mix UX made with different frameworks and their incompatible otherwise revisions.
    The JS Context insulation of embed-page provides "evolutionary architecture" support to web page.

Security

Briefly, increases security by jailing 3rd party content and JS, a secure alternative to directly including of 3rd party JS into page.

The scope insulation for DOM and CSS is done by WebComponet shadow dom, API for JS are insulated by closure for global objects with wrappers limiting the dom access root to component content. Similar approach is applied for url, storage, cookies, etc.

Use

  1. Add to project via npm, bower, or simply placing embed-page.js into project tree
  2. Import into page/module either by ES6 import, simple SCRIPT tag, webcomponent link rel="import", or AMD require
  3. Develop your reusable widgets as insulated HTML and include into page by <embed-page> or

Add some useful 3rd party microapplication into your page same way.

The content could be set either by src attribute or by Polymer {{data}} binding of content; including the insulated content in TEMPLATE; or binding content via html attribute.

    <embed-page src="abc.html" ></embed-page><!-- like seamless iframe -->
    
    <embed-page src="demo-menu.html" scope="none" ></embed-page><!-- like html import, no insulation -->
    

    <embed-page>    <!-- inline scope insulation -->
         <template>
             <style>h1{color:chocolate;}</style>
             <h1> In chocolate only itself, no fumes spread. </h1>
         <template>
    </embed-page>


    <!-- dynamic content binding -->
    <iron-ajax  last-response="{{htmlContent}}" url="abc.html" auto ></iron-ajax>
    <embed-page html="[[htmlContent]]"></embed-page>    

At the moment <embed-page> resides in Polymer echosystem, file the change request if need other or no framework compatibility.

Dependencies

Polymer 3 Element is a base for embed-page. No other dependencies in run time planned before first release ( currently project is in pre-release alpha stage). Polymer Paper Elements and Vaadin are used for demo and are not required to use <embed-page/>

To see in action

See the live basic DEMO , check the demo page on webcomponents.org , or locally run

$ polymer serve --open

It will open the demo page in browser. In demo the external page is loaded into shadow dom and its embedded and referenced JS will work with document via wrapper in same way as standalone page.

The host page document is not available from embedded content, which is validated by using same DOM selectors as in host page as in instances of <embed-page>.

Project

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, 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.

Keywords

FAQs

Package last updated on 20 Aug 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc