Bundle JS files using CDN and integrity attribute

Question

In ASP.NET MVC 5, is it possible to use BundleColletion.UseCdn and have it render with the HTML integrity attribute? For example, is there someway to make this:

bundles.UseCdn = true;
bundles.Add(
    new ScriptBundle("~/bundles/jquery", "https://code.jquery.com/jquery-3.1.1.min.js")
        .Include("~/Scripts/js/jquery/jquery-3.1.1.min.js")
);

render as this?

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

Did you find a solution to this? I'm facing the same problem. — RikRak, Oct 19 '17 at 08:50
@Ben Cook, I am also facing the same issue. Any solution for this? — Vignesh VS, Jul 25 '22 at 12:35
@VigneshVS the best solution is the top-rated answer, but as noted, it's not a great solution. I don't think there is a clean way to do what I wanted in ASP.NET MVC 5. — Ben Cook, Jul 25 '22 at 13:08

score 6 · Accepted Answer · edited Feb 14 '18 at 08:07

6

Partial answer.

To add crossorigin="anonymous" attribute you can use @Scripts.RenderFormat

@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" crossorigin=\"anonymous\"></script>", "~/bundles/jquery")

You also can include integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" part in RenderFormat, but it does not look like a good solution.

edited Feb 14 '18 at 08:07

radbyx

9,352
21
84
127

answered Jun 18 '17 at 19:39

Alexandre Swioklo

444
5
6

Sujay · Answer 2 · 2020-01-31T05:09:56.440

I tried this way in our ASP.NET MVC 5 project when CDN fails

@Scripts.RenderFormat("<script src='{0}' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' crossorigin='anonymous'></script>", "~/bundles/bootstrapJS")

And this will generate (inside developer tool),

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

And From this answer we found that there is bug if script is fail to load from CDN

So we add script manually inside the tag.

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>(window.jQuery) || document.write('<script src="/Scripts/jquery-1.12.4.min.js"><\/script>');</script>
</head>
<body></body>
</html>

score 0 · Answer 3 · answered May 02 '21 at 12:56

0

You can have it like

 <script src='@Scripts.Url("~/bundles/jquery")' crossorigin="anonymous" integrity="value"> </script>

answered May 02 '21 at 12:56

Mahmoud-Abdelslam

615
6
15

Bundle JS files using CDN and integrity attribute

3 Answers3