Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot avoid inline styles for CSP #17257

Closed
1 of 15 tasks
OrangeDog opened this issue Mar 19, 2020 · 4 comments
Closed
1 of 15 tasks

Cannot avoid inline styles for CSP #17257

OrangeDog opened this issue Mar 19, 2020 · 4 comments
Labels
feature Issue that requests a new feature
Milestone
Backlog

Comments

@OrangeDog
Copy link

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • xi18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

Unknown

Description

Even with an explicit "enableResourceInlining": false, the component styles are still inline, and will be blocked by a strict CSP.

The generated css file only includes some Material components, not all of them, and not any of the project's own css.

🔬 Minimal Reproduction

// app.module.ts

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [BrowserModule],
})
export class AppModule {
}
// app.component.ts

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor() {  }
}
<!-- index.html -->

<!DOCTYPE html>
<head>
  <title>data-explorer</title>
  <base href="/">
</head>
<body>
<app-root>
  <noscript>JavaScript must be enabled in order for you to use this service.</noscript>
  <p role="status">App is loading &hellip;</p>
</app-root>
</body>
<!-- app.component.html -->

<div class="hello">Hello</div>
/* app.component.css */

.hello { color: green; }
ng build --prod

🔥 Exception or Error


Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).
main-es2015.782421ee2e9ea83f2020.js:1:857126

🌍 Your Environment


Angular CLI: 8.3.25
Node: 10.15.3
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.25
@angular-devkit/build-angular     0.803.25
@angular-devkit/build-optimizer   0.803.25
@angular-devkit/build-webpack     0.803.25
@angular-devkit/core              8.3.25
@angular-devkit/schematics        8.3.25
@angular/cdk                      8.2.3
@angular/cli                      8.3.25
@angular/material                 8.2.3
@ngtools/webpack                  8.3.25
@schematics/angular               8.3.25
@schematics/update                0.803.25
rxjs                              6.5.4
typescript                        3.5.3
webpack                           4.39.2
@ngbot ngbot bot added this to the needsTriage milestone Mar 19, 2020
@alan-agius4 alan-agius4 added the feature Issue that requests a new feature label Mar 19, 2020
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Mar 19, 2020
@dgp1130
Copy link
Collaborator

dgp1130 commented Mar 19, 2020

The enableResourceInlining option is to configure whether to use styleUrl or styles property for libraries in order to support FESM where the file paths may change. In either scenario, the styles are processed by the framework at runtime and loaded as inline <style /> elements. The option name is perhaps a bit misleading here and we could probably improve our docs around it. Regardless, the option doesn't help with CSP and isn't what you're looking for here.

There is an issue in the FW repo about using a nonce for inline styles, this is probably the feature you're looking for: angular/angular#26152

Closing this issue as I don't think there's any action to take on the CLI side.

@dgp1130 dgp1130 closed this as completed Mar 19, 2020
@OrangeDog
Copy link
Author

Hmm, so it's not at all possible then.
There's no way to get it to pull all the component styles into the global styles.css?

@dgp1130
Copy link
Collaborator

dgp1130 commented Mar 20, 2020

I don't believe so, I think the only real workaround as of today is to include style-src 'unsafe-inline' in your CSP header.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
feature Issue that requests a new feature
Projects
None yet
Milestone
Backlog
Development

No branches or pull requests
3 participants
@OrangeDog @dgp1130 @alan-agius4