前端开发记录

1.Cesium 禁用默认底图

bash 复制代码

只设置imageryProvider: false,不生效 ，需要禁用 显示图层选择控件 baseLayerPicker: false,**

2.ts引用js文件tsconfig.json设置**

bash 复制代码

{ 
  "include": [
    "vite.config.*", 
    ...
    "src/**/*" // 添加配置
  ],
  "compilerOptions": {
    ...
    "allowJs": true, //添加 编译时允许有js
    "allowSyntheticDefaultImports": true, //允许引用没有默认导出的模块
    "outDir": "build" //添加 将输出结构重定向到目录
  }
}

3. 前端XSS漏洞示例**

bash 复制代码

function renderComment(comment) {
  return `<div>${comment.text}</div>`  // 危险！直接拼接用户输入
}

解决：

bash 复制代码

1.内容安全策略
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com">
2.// 安全渲染函数
function safeRender(text) {
  const div = document.createElement('div')
  div.textContent = text
  return div.innerHTML
}
// ❌ 危险方向：HTML字符串 → 解析为DOM
div.innerHTML = text// 解析，可能执行脚本

// ✅ 安全方向：文本 → DOM文本节点 → HTML字符串
div.textContent = text// 作为文本
div.innerHTML                // 转义后输出

4:前端安全问题**

XSS 防护：输入内容过滤（使用 DOMPurify）、输出转义（将 < 转为 <）、设置 Content-Security-Policy 响应头。

CSRF 防护：请求携带 Token（如 JWT）、验证 Referer/Origin 字段。

点击劫持防护：添加 X-Frame-Options: DENY 响应头，禁止页面被嵌入 iframe。

5.前端跨域问题**

bash 复制代码

//vite.config.js
   server: {
      host: '0.0.0.0', // 这个用于启动
      port: 8092, // 指定启动端口
      open: true, //启动后是否自动打开浏览器
      proxy: {
        // 代理所有以 /wyc 开头的请求
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },

6.跨浏览器兼容样式（例：火狐,ie低版本样式错位，会自动添加css 前缀）**

postcss.config.js 或 package.json中的配置

bash 复制代码

{
  "plugins": {
    "autoprefixer": {
      "browsers": ["> 1%", "last 2 versions"]
    }
  }
}

7.跨浏览器兼容语法**

postcss.config.js 或 package.json中的配置

bash 复制代码

# 安装核心库
npm install core-js regenerator-runtime

// 在主入口文件的第一行引入（如 main.js / index.js）
import 'core-js/stable';           // ES6+ API polyfill
import 'regenerator-runtime/runtime'; // async/await支持

更：

bash 复制代码

# 安装polyfill相关依赖
npm install core-js regenerator-runtime

# 安装Vite插件（可选）
npm install -D @vitejs/plugin-legacy 
```bash
// vite.config.js - 完整兼容配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    // 支持传统浏览器
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  
  build: {
    target: 'es2015',
    
    // 代码分割优化
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue'],
          polyfills: ['core-js', 'regenerator-runtime']
        }
      }
    }
  },
  
  // CSS 兼容性
  css: {
    postcss: {
      plugins: [
        require('autoprefixer')({
          overrideBrowserslist: [
            '> 1%',
            'last 2 versions',
            'not dead'
          ]
        })
      ]
    }
  }
})


**入口文件配置**
// src/main.js - 完整示例
// 1. 首先导入 polyfill（必须放在最前面！）
import 'core-js/stable'
import 'regenerator-runtime/runtime'

// 2. 然后导入 Vue
import { createApp } from 'vue'
import App from './App.vue'

// 3. 测试现代 API（确保 polyfill 生效）
// 这些 API 在旧浏览器中需要 polyfill
const testFeatures = () => {
  // Promise（需要 core-js）
  const promise = new Promise(resolve => {
    setTimeout(() => resolve('Promise 工作正常'), 1000)
  })

  // async/await（需要 regenerator-runtime）
  async function testAsync() {
    const result = await promise
    console.log('✅', result)
    return result
  }

  // Array.includes（需要 core-js）
  const arr = [1, 2, 3]
  console.log('✅ Array.includes:', arr.includes(2))

  // Object.entries（需要 core-js）
  const obj = { a: 1, b: 2 }
  console.log('✅ Object.entries:', Object.entries(obj))

  // 调用 async 函数
  testAsync()
}

// 启动时测试
testFeatures()

// 4. 创建并挂载 Vue 应用
createApp(App).mount('#app')