Using Polymer components with inline scripts


#1

Background

We currently have an investment in Polymer components for a number of our UI related things. We are currently looking at using Atom as a potential editing tool that we could extend and we’d like to leverage the work that we’ve got in these components rather than manipulating the DOM programmatically (which seems to be the current standard).

I found the current issue that’s the official conversation for discussing how various view technologies might be supported: https://github.com/atom/atom/issues/5756. However there doesn’t seem to be much activity in there lately.

I’ve gone through the docs for creating packages and I’ve been experimenting with writing a package that injects Polymer components into an Atom package View.

The main issue I’ve come across is a security violation related to inline scripts. It’s common with Polymer components to inline a script within .html component file:

<links go here>

<dom-module id="my-special-snowflake-component">

    <template>

        <style> </style>
		... other template stuff ...
    </template>

    <script>
        Polymer({
            is: 'my-special-snowflake-component'
        });
    </script>

</dom-module>

However, when I try to inject any of these Polymer components into the page, the developer console logs the following:

Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-9Cdh0xehsCH7Gok0Hct8nVkVUPtaZAhI8VfbNBgpBIQ=’), or a nonce (‘nonce-…’) is required to enable inline execution.

Took some digging but I eventually found that the index.html that Atom uses when it launches had the following security policy set:

  <meta http-equiv="Content-Security-Policy" content="default-src *; img-src blob: data: *; script-src 'self'; style-src 'self' 'unsafe-inline'; media-src blob: data: mediastream: *;">

Which is probably a reasonable precaution. However, I wanted to test what would happen if I modified it to be:

... script-src 'self' 'unsafe-inline'; ...

I cloned Atom from github, modified the index.html file, and tried my package again. Everything seemed to work.

Question

I’d rather not have to build customized versions of Atom to enable my package to load inline scripts so I’m asking if there’s some other way to allow my Polymer components and their associated inline scripts without having to modify and build Atom from source? Some programmatic switch to flip, or a way to query the user and allow them to say it’s okay?