JavaScript FileReader API不遵循accept类型限制问题排查

你的实现存在问题，核心原因是accept属性只是浏览器提供的非强制提示限制，并非严格校验：

• 部分浏览器会优先根据文件的MIME类型而非扩展名判断，而.crt/.cer与.pem/.key可能共享相同的MIME类型（比如text/plain或application/x-x509-ca-cert），导致浏览器误判允许上传；
• 即使浏览器遵循扩展名校验，用户也可以通过修改文件扩展名或手动选择文件的方式绕过限制。

解决办法 #

1. 前端增加扩展名强制校验

在FileReader处理前，手动提取文件扩展名并校验：

<input
  type="file"
  accept=".key, .pem"
  id="keyFileInput"
/>

document.getElementById('keyFileInput').addEventListener('change', function(e) {
  const allowedExts = ['.key', '.pem'];
  const selectedFile = e.target.files[0];
  
  if (!selectedFile) return;

  // 提取并转换为小写扩展名
  const fileExt = selectedFile.name.slice(selectedFile.name.lastIndexOf('.')).toLowerCase();
  
  if (!allowedExts.includes(fileExt)) {
    alert('仅支持上传.key或.pem类型的文件');
    e.target.value = ''; // 清空错误选择的文件
    return;
  }

  // 这里执行你的FileReader上传逻辑
  const reader = new FileReader();
  reader.onload = function(event) {
    // 处理文件内容
  };
  reader.readAsText(selectedFile);
});

2. 后端必须做二次校验

前端校验可以被轻易绕过（比如修改HTML代码、直接构造请求上传文件），所以后端需要：

• 校验文件扩展名是否为.key或.pem；
• 进一步校验文件内容格式（比如检查是否符合PEM密钥的结构，避免用户只是修改扩展名的情况）。

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