Progressive Web App（PWA）是一种新型的 Web 应用程序，它通过使用现代 Web 技术，如 Service Worker 和 Web App Manifest，提供了类似于原生应用程序的用户体验。但是，由于 PWA 是基于 Web 技术构建的，因此它们需要遵守 Web 平台的安全性和隐私性规则，以避免使用不可访问 API 的错误。
在本文中，我们将介绍如何在 PWA 开发中避免使用不可访问 API 的错误，并提供一些示例代码。
什么是不可访问 API？
不可访问 API 是指在 Web 平台上不允许使用的 API。这些 API 可能会导致安全漏洞或隐私问题，因此它们被浏览器禁止使用。
一些常见的不可访问 API 包括：
eval()函数：该函数可执行任意 JavaScript 代码，因此可能会导致跨站点脚本攻击（XSS）。document.write()方法：该方法可以向文档中写入任意内容，包括恶意代码。localStorage和sessionStorage对象：这些对象可用于存储敏感信息，如用户凭据或个人资料。XMLHttpRequest对象：该对象可用于执行跨站点请求，并可能导致跨站点请求伪造（CSRF）攻击。
如何避免使用不可访问 API？
要避免使用不可访问 API，可以使用以下方法：
1. 使用严格模式
使用 JavaScript 的严格模式可以防止使用一些不可访问 API，如 eval() 函数和 with 语句。
在 JavaScript 文件的开头添加 "use strict"; 即可启用严格模式。
"use strict"; // your code here
2. 使用安全的替代方案
如果需要执行动态 JavaScript 代码，可以使用 Function() 构造函数代替 eval() 函数。Function() 构造函数可以将字符串转换为可执行的 JavaScript 代码，但它不会创建新的变量或函数。
var x = 10; var y = 20; var code = "console.log(x + y);"; var fn = new Function(code); fn(); // 输出 30
如果需要向文档中写入内容，可以使用 textContent 或 innerHTML 属性代替 document.write() 方法。
-- -------------------- ---- ------- -- -- ----------- -- --- ------- - ---------------------------- ------------------- - ------- -------- ----------------------------------- -- -- --------- -- --- ------- - ---------------------------- ----------------- - --------------- ----------------- -----------------------------------
如果需要存储敏感信息，可以使用 IndexedDB 或 Web Storage API 代替 localStorage 和 sessionStorage 对象。IndexedDB 可以存储大量结构化数据，而 Web Storage API 可以存储较小的键值对。
-- -------------------- ---- ------- -- -- --------- --- ------- - ----------------------------- --- ----------------- - --------------- - --- -- - -------------------- --- ----------- - ------------------------- ------------- --- ----- - ----------------------------------- --- ------- - -------------- -- ----- --------- -- -- -- --- ------- --- -------------------------------- --------
如果需要执行跨站点请求，可以使用 fetch() API 代替 XMLHttpRequest 对象。fetch() API 可以发送跨站点请求，并支持 Promise API。
fetch("https://api.example.com/data")
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});3. 使用安全的默认设置
在使用 Web 应用程序清单（Web App Manifest）时，应使用安全的默认设置。例如，不要启用 display: standalone 模式，因为它可以隐藏浏览器的地址栏，从而使用户不知道他们在哪个网站上。
{
"name": "My App",
"short_name": "My App",
"start_url": "/",
"display": "browser"
}4. 遵守 Web 平台的安全性和隐私性规则
最后，要避免使用不可访问 API，还应遵守 Web 平台的安全性和隐私性规则。这些规则包括：
- 不要执行跨站点脚本攻击（XSS）。
- 不要执行跨站点请求伪造（CSRF）攻击。
- 不要存储敏感信息，如用户凭据或个人资料。
- 不要向文档中写入恶意代码。
- 不要使用不安全的默认设置。
示例代码
以下是使用安全的替代方案的示例代码：
-- -------------------- ---- -------
-- -- ---------- ----
--- - - ---
--- - - ---
--- ---- - -------------- - -----
--- -- - --- ---------------
----- -- -- --
-- -- ----------- --
--- ------- - ----------------------------
------------------- - ------- --------
-----------------------------------
-- -- --------- --
--- ------- - ----------------------------
----------------- - --------------- -----------------
-----------------------------------
-- -- ---------
--- ------- - ----------------------------- ---
----------------- - --------------- -
--- -- - --------------------
--- ----------- - ------------------------- -------------
--- ----- - -----------------------------------
--- ------- - -------------- -- ----- ---------
--
-- -- --- ------- ---
-------------------------------- --------
-- -- ------- ---
-------------------------------------
------------------------ -
------ ----------------
--
-------------------- -
------------------
---结论
在 PWA 开发中，避免使用不可访问 API 是非常重要的。通过使用严格模式、安全的替代方案、安全的默认设置和遵守 Web 平台的安全性和隐私性规则，可以避免使用不可访问 API，从而提高应用程序的安全性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6725ab072e7021665e18752e