产品动态
安全公告
产品公告
window 对象中实例化 EOClientSecurityKit 全局对象。开发者可通过此对象访问 SDK 接口,进行进一步配置和控制。/checkout)生效。此外,也可根据需要匹配 Cookie 或请求头等,提高灵活性。仅当请求匹配所有设置的条件时,才会进行脚本注入。www.buyexample.com 站点下所有 HTML 页面的浏览器和 WebView 客户端默认进行安全认证,以便对接口部署认证策略。
注入 JavaScript。当一个请求匹配多个规则时,以优先级高(数值低)的规则处置方式为准。
<script> 标签直接插入目标 HTML 页面 <head> 部分(或 <body> 结束标签前):src 属性指向正确的 SDK 分发地址。<script src="https://cdnstatic.tencentcs.com/edgeone/security/client-attestation/eoclientsecuritykit.min.js"></script>
<script> 标签加载执行后,eoclientsecuritykit.min.js 将运行并拦截页面中通过 AJAX(XHR 和 Fetch API)发出的请求。SDK 将处理认证挑战、获取认证令牌,并自动附加到后续请求中,从而保护 API 端点。<span>、<p>、<div> 和 <section>。SDK 将根据以下优先级顺序决定认证 UI 的渲染位置:window.EOClientSecurityKit.setClientAttestationDOMSelectorProvider(elementSelectorFunc) API 分配一个元素选择器函数。当 SDK 需要渲染认证 UI 时,将调用此函数。elementSelectorFunc 可通过以下两种方式定义:#valid-dom-id)、类名 (.valid-dom-class),或更复杂的后代选择器 (#valid-dom-id .valid-dom-class)。SDK 将使用此选择器查找页面元素并渲染 UI。// 元素渲染回调的选择器原型type ClientAttestationDOMSelector = () => string | Promise<string>// 示例 1:使用元素 ID 指定元素(同步方式)const tmpProviderSyncId: ClientAttestationDOMSelector = () => {return \\'#valid-dom-id\\'; // 返回元素ID选择器};// 示例 2:使用异步函数指定元素(动态创建元素)const tmpProviderAsync: ClientAttestationDOMSelector = () => {return new Promise((resolve, reject) => {setTimeout(() => {const id = Math.random().toString(36).substring(2, 15);const iframe = document.createElement(\\'div\\');iframe.id = id;document.body.appendChild(iframe);resolve(`body > #${id}`); // 解析为选择器字符串}, 500);});};// 设置回调函数(选择其中一个示例进行设置)// window.EOClientSecurityKit.setClientAttestationDOMSelectorProvider(tmpProviderSyncId);// window.EOClientSecurityKit.setClientAttestationDOMSelectorProvider(tmpProviderAsync);
setClientAttestationDOMSelectorProvider 分配选择器回调函数,SDK 将查找页面中第一个 ID 为 eo-client-attestation 的 HTML 元素。找到后,该元素将用于渲染认证 UI。此方式提供了一种简单的约定,方便开发者预留认证 UI 显示区域。<div id="eo-client-attestation"></div> <!-- 预留渲染区域的元素 -->
div 元素放置在 HTML 页面合适位置,并根据需要定制样式,确保认证 UI 与页面整体设计风格一致。<body> 标签末尾动态创建一个新的 HTML 元素用于渲染认证 UI。<body> 末尾,其样式和布局可能与页面设计不协调,甚至可能被其他元素遮挡。因此,强烈建议开发者主动分配并指定专门用于渲染认证 UI 的元素(通过选项一 或选项二),以精确控制认证 UI 的显示位置、大小和样式,从而提供更优质的用户体验。window.EOClientSecurityKit.setCustomHostnameScope(customScope) API,您可以精确指定哪些域名下的请求需要启用自动认证。这有助于避免 SDK 对不相关的第三方请求进行拦截,从而有效规避潜在的 CORS 问题。const hostnameScope = ["*.example.com", // 支持通配符匹配子域"a.test.com", // 精确匹配特定域名"[1-9].test.com" // 支持正则表达式匹配];window.EOClientSecurityKit.interceptor.setCustomHostnameScope(hostnameScope);
window.EOClientSecurityKit.interceptor.clearCustomHostnameScope();
www.your-app.com。该应用不仅向 api.your-app.com 发送受 EdgeOne 保护的 API 请求,还会集成一个第三方统计服务,该服务会向 analytics.third-party.com 发送数据上报请求。EdgeOne 客户端认证 SDK 已通过自动注入方式集成到您的应用页面中。XMLHttpRequest 和 fetch API 请求,并可能在这些请求的请求头中自动附加 EO-Attest-Token。当您的应用向 analytics.third-party.com 发送数据上报请求时,如果该请求也携带了 EO-Attest-Token,而 analytics.third-party.com 的服务器并未配置允许 EO-Attest-Token 这样的自定义请求头,那么浏览器会因为跨域安全策略(CORS)而阻止该请求。Access-Control-Request-Headers 字段,列出实际请求将携带的自定义请求头(包括 EO-Attest-Token)。analytics.third-party.com 的服务器未在其 CORS 配置中明确允许 EO-Attest-Token,它将拒绝该预检请求,导致预检失败。window.EOClientSecurityKit.interceptor.setCustomHostnameScope() API 来精确限定 SDK 的拦截范围,使其仅对您自己的域名(即 api.your-app.com)下的请求生效,而忽略对第三方域名的请求。// 在 SDK 加载并初始化后调用window.EOClientSecurityKit.interceptor.setCustomHostnameScope(["api.your-app.com", // 仅对您的 API 域名启用自动认证"www.your-app.com" // 如果主站也需要认证,可以添加]);// 此时,SDK 将不再向 analytics.third-party.com 的请求中添加 EO-Attest-Token// 第三方统计服务的数据上报请求将正常发送,不再受 CORS 限制。
api.your-app.com 和 www.your-app.com 的请求进行拦截和令牌附加。当应用向 analytics.third-party.com 发送请求时,SDK 不会再为其添加 EO-Attest-Token。由于请求不再包含第三方服务器不认识的自定义请求头,CORS 预检请求将成功通过,实际请求也能正常发送,从而确保第三方服务与 EdgeOne SDK 在同一页面中和谐共存,互不干扰。文档反馈