Asp.Net MVC View如何从后端读取script的src以隐藏API密钥

实现方案 #

完全可以通过后端传递脚本地址的方式避免前端硬编码密钥，这也是前端敏感配置的常规处理方式，具体实现步骤如下： #

步骤1：后端配置密钥和地址模板

把敏感配置放到Web.config中统一管理，避免硬编码在业务代码里：

<appSettings>
  <!-- 存储Yandex API密钥 -->
  <add key="YandexMapsApiKey" value="你的实际API密钥" />
  <!-- 存储脚本地址模板，用占位符替换密钥位置 -->
  <add key="YandexMapsScriptUrl" value="https://api-maps.yandex.ru/2.1/?apikey={0}&lang=ru_RU" />
</appSettings>

步骤2：控制器拼接完整地址传到视图

可以用ViewBag或者强类型ViewModel传递地址，这里以ViewBag为例：

public ActionResult AddressSearch()
{
    // 读取配置
    var apiKey = ConfigurationManager.AppSettings["YandexMapsApiKey"];
    var urlTemplate = ConfigurationManager.AppSettings["YandexMapsScriptUrl"];
    // 拼接完整脚本地址传到视图
    ViewBag.YandexScriptSrc = string.Format(urlTemplate, apiKey);
    return View();
}

步骤3：视图动态渲染script标签

在视图中直接用Razor语法输出动态地址即可：

<script src="@ViewBag.YandexScriptSrc" type="text/javascript"></script>

额外安全提示 #

Yandex地图API的密钥本身就需要随前端请求携带，哪怕按上述方式处理，用户依然可以通过浏览器控制台的网络请求看到完整地址和密钥。你可以去Yandex API后台配置密钥的允许调用域名白名单，限制只有你的站点域名可以调用该密钥，就算密钥泄露其他人也无法盗用。

内容的提问来源于stack exchange，提问作者DevP