How to instruct Angular CLI to NOT inline images less than 10Kb in size

[oburakevych]

Versions

Angular CLI: 1.6.0
Node: 8.9.0
OS: darwin x64
Angular: 5.0.0
... compiler, compiler-cli, core, service-worker

Repro steps

• Make sure your app has assets, e.g. images of size less than 10Kb referenced from your css
• run ng build --target=production

Observed behavior

Assets, e.g. images of size less than 10kb are inlined in CSS

Desired behavior

When building an Angular app with Angular CLI, resources in CSS, e.g. svg images, less than 10kb in size will be inlined.

This sounds like a good concept from the performance point of view, however, it violates very strict Content Security Policies in my app, which I 'm not allowed to change.

data: Allows data: URIs to be used as a content source. This is insecure; an attacker can also inject arbitrary data: URIs. Use this sparingly and definitely not for scripts.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src

I want an option to NOT to inline any assets, e.g. images, in CSS due to strict CSP requirements.

Mention any other details that might be useful (optional)

[clydin]

For extremely strict environments, an option is to eject the configuration and customize the webpack configuration for the applications target environment.

Out of curiosity, that warning may sound alarming but is there any research that suggests a data URI as an image source represents a security issue? As opposed to scripts which are a completely different matter (which that warning is pointing towards).

Also, note that unsafe-inline will be needed for style-src and currently unsafe-eval may also be needed for script-src (this can be eliminated by removing reflect polyfills, running in AOT mode, and removing the webpack node global shim from an ejected configuration).

[oburakevych]

@clydin Well, I submitted a request to verify the possibility to add img-src data:; rule in the CSP headers. Though, it's almost Christmas, may take a while before I get a response.

From my understanding the issue is in the fact that img-src can only define schema, e.g. img-src data:; but cannot define a specific resource type, e.g. img-src data:image/svg+xml;, so all resource types will be allowed...

Meanwhile, I created a PR to add --inline-asset-max-size build flag #8967

[filipvh]

ok, 10KB sounds like fine right? until you have 100 of them
a 1MB+ styles file is not a good thing
on a localhost or fast connection, you won't notice it,
but not all connections are created equally
we should at least be able to disable this all together
in .angular-cli.json or so

[oburakevych]

Got response from the security. It appears adding img-src data:; to the CSP headers is not a big security issue.
This issue is not relevant t me anymore, though, it would be good to have options.