CSP warning for inline stylesheet

[sandstrom]

This isn't a big issue, the only drawback is the warning itself + styles aren't injected. Just wanted to note this issue here with details, in case others are curious. A simple workaround is to add allow-inline for style-src to the CSP policy when running in development.

---

Content Security Policy (CSP) restrict what code running in the browser can do. For example, it may restrict JS loaded from certain origins, or forbid inline Javascript or CSS altogether.

For Chrome Extensions there are two types of CSP policies that come into play:

1. The policy defined by the extension itself, and
2. under some scenarios, the code that the extension is running in the webpage itself.

There are more details in this guide, but in short if the content script is injecting JS that is later executed by the page, that code will be subjected to the pages CSP.

I'm guessing that may be what's going on here. Don't know the inner workings of this extension, so difficult for me to asses if this is an easy or difficult fix.

---

Problem

A CSP warning is emitted when opening the Ember Inspector , if unsafe-inline isn't permitted in the styles directive.

Refused to apply inline style because it violates the following Content Security Policy directive [Chrome warning]

---

Relevant Code

This is the line in Ember Inspector:

ember-inspector/ember_debug/libs/view-inspection.js

Line 654 in 4713877

_insertStylesheet(content) {

Issue and Steps to Reproduce

• Install Ember Inspector extension
• Load the website running the ember app

Your environment

Ember: 3.15.0
Ember Data: 3.15.1
Browser: Chrome 80.0.3987.122

Screenshots

[RobbieTheWagner]

@sandstrom just to confirm, you have ember-cli-content-security-policy installed in your app?

[sandstrom]

Yeah, but I could get the same error using my own CSP tag too.

Perhaps switching to this API would help?
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS

This page has some more details about CSP in extensions (last few sections):
https://developer.chrome.com/extensions/contentSecurityPolicy

[RobbieTheWagner]

@sandstrom I think what I am saying is we don't have a CSP on inspector, but it does run kind of inside your app, so I think your app's CSP is bleeding over. You may need to add entries for inspector in your app's CSP for when running in dev mode.

Thoughts on this @chancancode?

[sandstrom]

@rwwagner90 Yeah, that works. Though when you do you are also making it harder to understand your own CSP policy and risk introducing code that works in development, but breaks in production. So it's not an ideal fix. I've updated the top comment with some more details.

I think the issue may be how the extension is executing JS on the page. But not sure it's worth fixing. The lack of styling doesn't have any discernible downside.

I think it makes sense to keep this issue open, so curious people can find out what's going on. But it's not something that's important to fix.

[sandstrom]

I think one solution may be to inline the style on the HTML elements, before inserted.

Something like this:

let highlightStyles = {
  display: 'none',
  pointer-events: 'none',
  box-sizing: 'border-box',
  position: 'absolute',
  margin: '0px',
  padding: '0px',
  border: 'none',
  z-index: '10000',
  // https://github.com/ChromeDevTools/devtools-frontend/blob/b336f0440a8fb539352ac223ef466c3475618cf1/front_end/common/Color.js#L904
  background: 'rgba(111, 168, 220, .66)',
};

function styleString(styles) {
  return Object.keys(styles).forEach((k) => {
    return `${k}: ${styles[k]};`;
  })
};

function makeHighlight(id) {
  return `<div id="ember-inspector-highlight-${id}" style="${styleString(highlightStyles)}" role="presentation"></div>`;
}

Since the styles are basically 1:1 with a few specific elements anyway, this shouldn't affect maintainability much at all. I think it would circumvent the style inline-eval warning.

Not 100% sure about this though, maybe CSP would trip on this too.