CORS properties in application-*.yml not working

[SudharakaP]

Overview of the issue

This maybe due to my lack of understanding of how CORS seems to behave in JHipster applications. But I am trying to include a video in a sample jhipster application which is hosted on a external storage. Here's the sample application.

https://github.com/SudharakaP/JHipsterCORSSampleApplication

Now when I run npm start with Browsersync and access front-end on localhost:9000 everything seems to work fine. But when I run ./mvnw -Pdev it seems that the video is not accessible and I get the CORS error;

Content Security Policy: The page’s settings blocked the loading of a resource at https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4 (“default-src”).

Since in the application-dev.yml we have,

cors:
    allowed-origins: '*'
    allowed-methods: '*'
    allowed-headers: '*'
    exposed-headers: 'Authorization,Link,X-Total-Count'
    allow-credentials: true
    max-age: 1800

I thought that in dev profile these requests should be allowed. Am I missing something here? 🤔

Motivation for or Use Case

Making Browsersync and dev profile experience consistent.

Reproduce the error

Please clone the above repo and follow the above instructions given in the overview.

JHipster Version(s)

6.10.3

JHipster configuration

<details>
<summary>.yo-rc.json file</summary>
<pre>
{
  "generator-jhipster": {
    "applicationType": "monolith",
    "gitCompany": "",
    "baseName": "JHipsterCORSSampleApplication",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": 8080,
    "serviceDiscoveryType": false,
    "authenticationType": "jwt",
    "uaaBaseName": "../uaa",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "enableSwaggerCodegen": false,
    "messageBroker": false,
    "buildTool": "maven",
    "useSass": true,
    "clientPackageManager": "npm",
    "testFrameworks": [],
    "enableTranslation": false,
    "nativeLanguage": "en",
    "languages": ["en"],
    "clientFramework": "react",
    "jhiPrefix": "jhi",
    "jhipsterVersion": "6.10.3",
    "jwtSecretKey": "YourJWTSecretKeyWasReplacedByThisMeaninglessTextByTheJHipsterInfoCommandForObviousSecurityReasons",
    "embeddableLaunchScript": false,
    "clientTheme": "none",
    "creationTimestamp": 1601263618104,
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [],
    "blueprints": [],
    "prettierJava": true
  },
  "git-provider": "GitHub",
  "git-company": "SudharakaP",
  "repository-name": "JHipsterCORSSampleApplication"
}

</pre>
</details>

• [x] Checking this box is mandatory (this is just to show you read everything)

[atomfrede]

It is not the cors policy, its the content security policy. By default (e.g. for images, videos) only self is allowed. You need to adapt the policy accordingly. We do that already in case bootswatch themes are selected as they include parts from google fonts for example.

[SudharakaP]

@atomfrede : Ah, nice; yes I was confusing the two; thanks for the explanation. 😄