Sass 安全最佳实践 #

// 避免直接使用可能包含恶意内容的变量
// 不推荐 - 如果变量来自不安全来源
$unsafe-input: '10px; } .malicious { display: none; .target { background: red';

// 推荐 - 使用验证函数
@function safe-number($value, $unit: px) {
  @if type-of($value) == 'number' {
    @if unit($value) == '' {
      @return $value * 1px;
    }
    @return $value;
  }
  @error 'Value must be a number, got #{type-of($value)}';
}

// 安全的尺寸处理
@mixin safe-size($width, $height: $width) {
  width: safe-number($width);
  height: safe-number($height);
}

// 使用示例
.safe-box {
  @include safe-size(100px, 200px);
}

// 安全的字符串处理函数
@function safe-string($value) {
  @if type-of($value) == 'string' {
    @return $value;
  }
  @return inspect($value); // 返回值的字符串表示
}

// URL安全处理
@function safe-url($url) {
  @if type-of($url) == 'string' {
    // 验证URL格式
    @if str-index($url, 'http://') or str-index($url, 'https://') or str-index($url, '/') == 1 {
      @return url($url);
    }
    @error 'Invalid URL format: #{$url}';
  }
  @error 'URL must be a string, got #{type-of($url)}';
}

// 安全的类名生成
@function safe-class-name($name) {
  @if type-of($name) == 'string' {
    // 移除潜在危险字符
    $cleaned: $name;
    @each $char in ('<', '>', '"', "'", '&', '{', '}') {
      $cleaned: str-replace($cleaned, $char, '');
    }
    @return $cleaned;
  }
  @return to-lower-case(inspect($name));
}

// 字符串替换辅助函数
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

// 使用安全函数
.element {
  @function create-safe-selector($base, $modifier) {
    $safe-base: safe-class-name($base);
    $safe-modifier: safe-class-name($modifier);
    @return '.#{$safe-base}.#{$safe-modifier}';
  }
}

// 创建依赖清单文件
// dependencies.yml 或 package.json 注释
/*
Sass Dependencies Security Checklist:
- Verify source authenticity
- Check for known vulnerabilities
- Keep dependencies updated
- Audit third-party imports
*/

// 安全的模块导入
@use 'sass:map';
@use 'sass:list';
@use 'sass:meta';
@use 'sass:string';

// 验证第三方库的安全性
// _security-checks.scss
@function validate-dependency-version($dependency, $expected-version) {
  // 这里应该有版本验证逻辑
  @return true; // 简化的示例
}

// 使用安全验证
@if validate-dependency-version('bootstrap', '5.3.0') {
  @use 'vendor/bootstrap' as bs;
  // 安全使用依赖
}

// 创建版本锁定机制的注释
/*
SECURITY AUDIT:
- All dependencies versions are locked
- Third-party libraries reviewed
- No runtime evaluation of external content
- All functions validated for safety
*/

// 版本检查混合宏
@mixin check-version($required-version, $current-version) {
  @if not version-compatible($required-version, $current-version) {
    @warn 'Version mismatch detected: required #{$required-version}, current #{$current-version}';
  }
}

@function version-compatible($req, $cur) {
  // 简化的版本兼容性检查
  @return true;
}

// 避免内联样式和eval相关功能
// 不推荐 - 可能违反CSP
// style属性中的内联样式由HTML处理，不在Sass控制范围内

// 推荐 - 生成外联CSS类
%csp-safe-base {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.csp-safe-component {
  @extend %csp-safe-base;
  
  // 使用CSS变量而非动态计算（如果浏览器支持）
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  
  background-color: var(--primary-color);
  color: var(--secondary-color);
  
  // 避免使用可能触发CSP的属性
  // 不使用: content: attr(data-content) 等动态内容
}

// 安全的动画定义
%csp-safe-animation {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

.fade-in {
  @extend %csp-safe-animation;
  animation-name: fade-in-safely;
}

@keyframes fade-in-safely {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// _secure-config.scss
// 敏感配置分离
$secure-settings: (
  // 不要在Sass中存储真正的敏感信息
  // 如API密钥、密码等
  'theme': 'default',
  'locale': 'en-US',
  'debug-mode': false,
  'enable-animations': true
);

// 安全的配置访问
@function get-secure-setting($key) {
  @if map-has-key($secure-settings, $key) {
    @return map-get($secure-settings, $key);
  }
  @return null;
}

// 使用安全配置
.body {
  @if get-secure-setting('enable-animations') {
    transition: all 0.3s ease;
  }
  
  @if get-secure-setting('debug-mode') {
    outline: 1px solid rgba(red, 0.5);
  }
}

// 环境相关配置
$environment: 'production'; // 设定在构建时

$env-specific: (
  'development': (
    'show-grid': true,
    'debug-colors': true
  ),
  'staging': (
    'show-grid': false,
    'debug-colors': false
  ),
  'production': (
    'show-grid': false,
    'debug-colors': false
  )
);

// 根据环境应用不同样式
@if map-get(map-get($env-specific, $environment), 'show-grid') {
  .debug-grid {
    background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }
}

// _build-security.scss
// 构建时安全检查

// 验证必需变量是否存在
@function require-variable($var, $name) {
  @if $var == null {
    @error 'Required variable $#{name} is not defined';
  }
  @return $var;
}

// 定义必需的变量
$primary-color: #007bff !default;
$font-family: null;

// 验证必需变量
$font-family: require-variable($font-family, 'font-family');

// 安全的构建配置
$build-config: (
  'environment': 'production',
  'minify': true,
  'sourcemap': false,  // 生产环境中通常不包含源映射
  'strip-comments': true
);

// 根据构建配置应用样式
@if map-get($build-config, 'environment') == 'development' {
  // 开发环境特定样式
  [data-debug] {
    outline: 1px dashed rgba(255, 0, 0, 0.5);
  }
}

// XSS防护相关的CSS
// 虽然CSS不能直接防止XSS，但可以通过样式减少风险

// 防止内容溢出导致的UI问题
.secure-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  
  // 限制最大宽度防止超长内容破坏布局
  max-width: 100%;
  box-sizing: border-box;
}

// 安全的用户生成内容容器
.user-generated-content {
  @extend .secure-content;
  
  // 限制高度并提供滚动
  max-height: 300px;
  overflow-y: auto;
  
  // 重置可能有害的样式
  all: initial;
  
  // 仅允许安全的样式
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

// 安全的响应式图像处理
@mixin secure-image {
  max-width: 100%;
  height: auto;
  display: block;
  
  // 防止图像破坏布局
  box-sizing: border-box;
}

.secure-image {
  @include secure-image;
}

// 安全的颜色处理
@function safe-color($color) {
  @if type-of($color) == 'color' {
    @return $color;
  }
  @error 'Expected color, got #{type-of($color)}: #{$color}';
}

// 安全的尺寸处理
@function safe-dimension($value) {
  @if type-of($value) == 'number' {
    @return $value;
  }
  @error 'Expected number, got #{type-of($value)}: #{$value}';
}

// 安全的百分比计算
@function safe-percentage($numerator, $denominator) {
  @if type-of($numerator) == 'number' and type-of($denominator) == 'number' {
    @if $denominator == 0 {
      @error 'Division by zero';
    }
    @return percentage($numerator / $denominator);
  }
  @error 'Both arguments must be numbers';
}

// 安全的混合宏
@mixin safe-border($width: 1px, $style: solid, $color: #000) {
  border-width: safe-dimension($width);
  border-style: if(type-of($style) == 'string', $style, 'solid');
  border-color: safe-color($color);
}

// 使用安全混合宏
.secure-element {
  @include safe-border(2px, solid, #333);
}

// 安全的响应式工具
@mixin safe-responsive($property, $mobile, $tablet: null, $desktop: null) {
  #{$property}: safe-dimension($mobile);
  
  @if $tablet != null {
    @media (min-width: 768px) {
      #{$property}: safe-dimension($tablet);
    }
  }
  
  @if $desktop != null {
    @media (min-width: 1024px) {
      #{$property}: safe-dimension($desktop);
    }
  }
}

.responsive-element {
  @include safe-responsive(font-size, 14px, 16px, 18px);
}

// 安全审计清单
/*
SASS SECURITY AUDIT CHECKLIST:

1. Input Validation
   - [ ] All function parameters validated
   - [ ] Type checking implemented
   - [ ] Error handling in place

2. Dependency Management
   - [ ] Third-party libraries verified
   - [ ] Versions locked and updated
   - [ ] Vulnerability scans performed

3. Content Security
   - [ ] No inline styles generated
   - [ ] CSP-compatible CSS produced
   - [ ] External content validated

4. Build Process
   - [ ] Secure build configurations
   - [ ] Environment-specific settings
   - [ ] Output validation implemented

5. Responsive Design
   - [ ] XSS-resistant layouts
   - [ ] Content overflow prevention
   - [ ] Safe user-generated content styling
*/

// 安全检查混合宏
@mixin security-review($component-name) {
  // 记录安全审查信息
  /* Security Review: #{$component-name} */
  // 在注释中记录安全相关信息
  @content;
}

// 使用安全审查混合宏
@function create-secure-component($name) {
  @include security-review($name);
  
  @return '.secure-#{$name}';
}

// 安全的组件生成
.secure-card {
  @include security-review('card');
  
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  
  .content {
    overflow-wrap: break-word;
  }
}

// 安全开发工作流示例
// 1. 定义安全基类
%safe-base {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
}

// 2. 创建安全工具函数
@function validate-input($input, $type) {
  @return type-of($input) == $type;
}

// 3. 使用安全模式构建组件
@mixin secure-component($name, $props: ()) {
  @if not validate-input($name, 'string') {
    @error 'Component name must be a string';
  }
  
  .secure-#{$name} {
    @extend %safe-base;
    @content;
  }
}

// 4. 安全组件实现
@function secure-grid($columns, $gap: 1rem) {
  @if not validate-input($columns, 'number') or not validate-input($gap, 'number') {
    @error 'Grid parameters must be numbers';
  }
  
  @return (
    'display': 'grid',
    'grid-template-columns': repeat($columns, 1fr),
    'gap': $gap
  );
}

// 使用安全模式
.secure-grid {
  @each $prop, $value in secure-grid(3, 2rem) {
    #{$prop}: $value;
  }
}

// 5. 安全输出验证
// 在构建后验证输出的CSS是否符合安全标准