What needs to be done to allow a JS file stored in the DAM to be referenced in a script call in an HTML page?

[philbps]

We have a JS file that is stored in the dam. We have an page template that calls that file like this <script type="text/javascript" src="/content/dam/path/to/script/file.js"></script>.

When I run the app locally I get this error "The resource from “http://localhost:4502/content/dam/path/to/script/file.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

This works in production but I've got no idea how this was achieved.

This is on AEM 6.1.

[Asutosh_Jena_]

Hi @philbps 

I have done the similar implementation and reading the file path from page properties and showing it on page.

Using the below code:

<script data-sly-test.javaScript="${inheritedPageProperties.javaScript}" type="text/javascript" src="${javaScript}"></script>

Thanks! 

[raja-thannasi]

Hi @Asutosh_Jena_ , Hope you doing good. . I have one clarification on above post, you mentioned code as below. In this 

<script data-sly-test.javaScript="${inheritedPageProperties.javaScript}" type="text/javascript" src="${javaScript}"></script>

In this code,  can you please explain data-sly-test.javaScript is the /content/dam/sample.js ? and src=is the filename(/content/dam/sample.js)?

this is my html code to call javascript. Is this correct way to call js?

<script data-sly-test.javascript="plugnplay-faqs-js.js" type="text/javascript" src="/content/dam/plugplay/resources/plugnplay-faqs-js.js?url=${endpointUrl}"></script>

[Vijayalakshmi_S · Accepted solution]

Hi @philbps,

Root cause given the error statement is that, request to JS from DAM has Response headers with Content-Type as text/html (deteted as html instead of as JS file) instead of as application/javascript.

X-Content-Type-Options set as nosniff will block the request if the request destination is of type "script" and the MIME type is not a JavaScript MIME type.

With this reason, few possible routes to narrow down the issue(as the issue is only with your local and not in PROD), 

• Compare the network calls (filter requests to "JS") in both local and PROD in same browser. (two different tab)
  • X-Content-Type-Options:nosniff on Response Headers in both local and PROD
• Confirm if the JS file that you are checking is same in both local and PROD.
  • Can cross verify the asset "Properties" from being in DAM. In particular, "Type" property
• Look for OSGI configuration related to MIME type in both local and PROD. There exist a config named "Day CQ DAM Mime Type Service" in 6.5.0. Not sure of its equivalent from 6.1 (Should be available in the same name. Else, do search for MIME type and locate the one related to DAM)