How can I stop razor pages from seeing an @ symbol in a script url as a C# call?

Question

I am trying to build a website using ASP.NET Core Razor Pages using bootstrap 5. However it sees the @popperjs tag in the footer as a C# method call. This script is the Index.cshtml file.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
    </script>

It is the first @ in this line that is bugging out.

How do I solve this issue?

ps: full index markup if needed.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<!doctype html>
<html lang="en">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS v5.2.1 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

</head>

<body>
  <header>
    <!-- place navbar here -->
  </header>
  <main>

  </main>
  <footer>
    <!-- place footer here -->
  </footer>
  <!-- Bootstrap JavaScript Libraries -->

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
    </script>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
    integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
  </script>
    
</body>

</html>

I have tried both removing and duplicating the at fault @ symbol to try and escape this method call. Neither worked.

It looks like the at character has to be escaped with @@. See https://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine — Philippe, Jul 04 '23 at 09:33
As I stated above, @@ did not work. Error when trying: Invalid URL. The URL structure is /npm/package@version/file.js — Diederik Toxopeus, Jul 04 '23 at 09:58
The `@` symbol should not cause problems in URLs when they are in double-quoted strings as part of an HTML element attribute., unless the string is broken before or after the `@` symbol. You should not need to escape them or encode them. — Mike Brind, Jul 05 '23 at 07:30

score 0 · Accepted Answer · edited Jul 11 '23 at 06:47

0

I found a workaround using @Philippe 's link. Namely:

@{ var FRazor = "cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/…"; } <script src=@FRazor integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"> </script> I hope this can help someone else hitting their head against this

edited Jul 11 '23 at 06:47

Schwarz Software

1,114
8
22

answered Jul 04 '23 at 10:15

Diederik Toxopeus

1
3

How can I stop razor pages from seeing an @ symbol in a script url as a C# call?

1 Answers1