Refused to apply inline style because it violates the following Content Security Policy directive

Question

So  in about 1 hour my extensions failed hard   I was doing my extension and it was doing what I pretended  I made some changes  and as I didnt liked I deleted them  and now my extension is throwing error      Refused to apply inline style because it violates the following   Content Security Policy directive   default-src  self    Note that    style-src  was not explicitly set  so  default-src  is used as a   fallback    What causes this error   I made my changes in   popup html   lt  DOCTYPE html gt   lt html ng-app  PinIt  ng-csp gt       lt head gt           lt link rel  stylesheet  href  css popup css  gt           lt script src  js lib jquery-1 8 2 min js  gt  lt  script gt           lt script src  js lib angular min js  gt  lt  script gt           lt script src  js app app js  gt  lt  script gt           lt script src  js app popup js  gt  lt  script gt        lt  head gt       lt body id  popup  gt           lt header gt               lt h1 gt PinIt lt  h1 gt           lt  header gt       lt div ng-controller  PageController  gt               lt div gt   message   lt  div gt               lt h2 gt Page  lt  h2 gt               lt div id  elem  gt   title   lt  div gt               lt div gt   url   lt  div gt               lt h2 gt Imagens  lt  h2 gt               lt ul gt                   lt li ng-repeat  pageInfo in pageInfos  style  list-style  none  gt                       lt div class  imgplusshare  gt                       lt img src   pageInfo   class  imagemPopup   gt                       lt ul class  imas  gt                         lt li id  liFacebook  ng-click  fbshare pageInfo   gt                         lt span gt                         lt img src  facebook 16 png   gt Facebook                        lt  span gt                       lt  li gt                       lt li id  liTwitter  ng-click  twshare pageInfo   gt                       lt span gt                       lt img src  twitter-bird-16x16 png   gt Twitter                      lt  span gt                       lt  li gt                       lt li id  liGooglePlus  ng-click  gpshare pageInfo   gt                       lt span gt  lt img src  gplus-16 png   gt Google  lt  span gt                       lt  li gt                       lt li id  liEmail  ng-click  mailshare pageInfo   gt                       lt span gt  lt img src  mail icon 16 png   gt Email lt  span gt                       lt  li gt                       lt hr gt                       lt  ul gt                        lt  div gt                       lt  li gt                        lt  ul gt   lt  div gt       lt  body gt   lt  html gt    popup js    myApp service  pageInfoService   function             this getInfo   function callback                var model                    chrome tabs query   active   true               function  tabs                    if  tabs length  gt  0                                        model title   tabs 0  title                      model url   tabs 0  url                       chrome tabs sendMessage tabs 0  id     action    PageInfo     function  response                             model pageInfos   response                           callback model                                                                                      myApp controller  PageController   function   scope  pageInfoService             pageInfoService getInfo function  info                            scope title   info title               scope url   info url               scope pageInfos   info pageInfos               scope fbshare    function  src                 chrome windows create  url  http   www facebook com sharer sharer php u    src                              scope twshare    function  src                 chrome windows create  url  https   twitter com intent tweet url    src                          scope gpshare    function  src                 chrome windows create  url  https   plus google com share url    src                          scope mailshare    function  src                 chrome windows create  url  mailto  subject Imagem Partilhada por PinIt amp body  lt img src      src        gt                               scope  apply                            Here is my manifest file          name    PinIt        version    1 0        manifest version   2        description    Pin It        icons              128    icon128 png              browser action              default icon    img defaultIcon19x19 png            default popup    popup html            default title    PinIt              content scripts            js      js lib jquery-1 8 2 min js    js app content js    js jquery-ui-1 10 3 custom js          matches                       run at    document start                minimum chrome version    18        permissions      http          https          unlimitedStorage    contextMenus    cookies    tabs    notifications          content security policy    default-src  self       any sugestion

User · Answer

As per http   content-security-policy com  The best place to start       default-src  none        script-src  self        connect-src  self        img-src  self        style-src  self       font-src  self     Never inline styles or scripts as it undermines the purpose of CSP  You can use a stylesheet to set a style property and then use a function in a  js file to change the style property  if need be

User · Answer

As the error message says  you have an inline style  which CSP prohibits  I see at least one  list-style  none  in your HTML  Put that style in your CSS file instead   To explain further  Content Security Policy does not allow inline CSS because it could be dangerous  From An Introduction to Content Security Policy       If an attacker can inject a    script tag that directly contains some malicious payload    the    browser has no mechanism by which to distinguish it from a legitimate    inline script tag  CSP solves this problem by banning inline script    entirely  it   s the only way to be    sure

User · Answer

Another method is to use the CSSOM  CSS Object Model   via the style property on a DOM node   var myElem   document querySelector   my-selector    myElem style color    blue     More details on CSSOM  https   developer mozilla org en-US docs Web API HTMLElement style  As mentioned by others  enabling unsafe-line for css is another method to solve this

User · Answer

Well  I think it is too late and many others have the solution so far    But I hope this can Help    I m using react for an identity server so  unsafe-inline  is not an option at all  If you look at your console and actually read the CSP docs  you might find that there are three options for solving the issue      unsafe-inline  as it says is unsafe if your project is using CSPs is for one reason and it is like throwing out the complete policy  will be the same to no have CSP policy at all    sha-XXXCODE  this is good  safe but not optimal because there is a lot of manual work and every compilation the SHA might change so it will become easily a nightmare  use only when the script or style is unlikely to change and there are few references  Nonce  This is the winner     Nonce works in the similar way as scripts  CSP HEADER    csp stuff nonce-12331   lt script nonce  12331  gt       script content  lt  script gt     Because the nonce in the csp is the same that the tag  the script will be executed   In the case of inline styles  the nonce also came in the form of attribute so the same rules apply   so generate the nonce and put it on your inline scritps   If you are using webpack maybe you are using the style-loader   the following code will do the trick   module exports       module        rules                    test     css  i          use                            loader   style-loader               options                  attributes                    nonce   12345678                                                           css-loader

User · Answer

You can also relax your CSP for styles by adding style-src  self   unsafe-inline     content security policy    default-src  self  style-src  self   unsafe-inline       This will allow you to keep using inline style in your extension   Important note  As others have pointed out  this is not recommended  and you should put all your CSS in a dedicated file  See the OWASP explanation on why CSS can be a vector for attacks  kudos to   KayakinKoder for the link

User · Answer

You can use in Content-security-policy add  img-src  self  data    And Use outline CSS Don t use Inline CSS It s secure from attackers

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

Examples related to javascript

Examples related to google-chrome-extension

Examples related to content-security-policy