shaunli (李舜阳)

有什么好的办法提高前端 Javascript 的安全性？

shaunli — Sat, 25 Apr 2015 19:30:14 +0800

最近做 Web 开发产生的疑问，正好前几天被人问到了，我也不知道答案，不知道各位有经验的前辈如何看待这个问题。

像 Ember、Angular、React 这些前端框架固然强大，很多功能跟 Rails 等后端框架都有重合，甚至还更好用。但前端框架最大的问题是安全性无法保障，JS 代码完全暴露给用户，很容易被篡改。为了保证逻辑正确，即使前端框架可以实现某些功能，也只能在留在 Server 端进行操作。

比如最简单的数据验证问题，使用 Javascript 进行本地验证无疑是效率最高的方式，但安全风险太大，通常只能把这些敏感步骤放在 Server 端进行，但这样就加重了 Server 的负担，效率也不高（网络延迟）。如果同时追求性能和安全，那就前端后端都做一遍，前端过滤掉普通用户的非法操作，后端阻止 strong 用户的非法操作。但这样开发的成本就翻倍了啊。

有没有什么好的策略吗？如何权衡这种问题呢？😶

请教大家关于多条件查询这种场景，应该按照什么思路去做

shaunli — Thu, 19 Mar 2015 18:01:48 +0800

多条件联动查询，就是下面这种效果

昨天加今天查了很多相关资料，下面是我的想法：

1. 由 js 在前端收集当前的筛选条件 给每个查询条件绑定 click 事件，点击则添加一个 class 标记（selected），再次点击取消这个标记

2. 当触发查询时，将收集的筛选条件以 json 格式向后端发送 ajax 请求 用 js 找到所有带有 selected 标记的元素，得到全部筛选条件，然后构造 json，发 ajax 请求

3. 对应控制器方法处理该请求，提取筛选条件，构造查询条件，向模型发起查询 从 params 参数中提取出筛选条件，简单整理一下，然后用 ActiveRecord 查询（刚开始研究这一块，具体怎么做还不清楚）

4. 模型返回查询结果给控制器

5. 控制器将查询结果打包成 json 串，以 ajax 回调的方式发回前端

6. 前端 js 动态修改页面，展示查询结果

这个想法应该是能做（现在我已经把 1、2、5、6 都跑通了，正在研究 3、4），但是我总觉得不太好，太麻烦，想听听有经验的大牛们是如何实现这种业务的。

UJS Ajax 或 JSON Ajax 没有效果

shaunli — Thu, 19 Mar 2015 11:57:13 +0800

看了官方文档和网上的资料，尝试写个 ujs 的例子，大致流程是这样：用户点击按钮 -> 发送 post 请求给后端 -> 后端返回 js 模板 -> 前端执行 js 模板

但是在发送 ajax 请求的时候，似乎没有起作用，浏览器的调试器中找不到任何 post 请求，网页也没有任何变化，不知道是为什么。跟踪 javascript 发现确实执行了 ajax，但是为什么随后就没音儿了呢？

这是分离的 CoffeeScript：

$ ->
  $(".my-test").click ->
    console.log("This is a test from coffeescript")
    $.ajax
    type: "POST"
    url: "queries/select"
    dataType: "js"
    data:
      message: "I am a message"
    error: (jqXHR, textStatus, errorThrown) ->
      console.log("AJAX Error: #{textStatus}")
    success: (data, textStatus, jqXHR) ->
      console.log("Successful AJAX call: #{data}")

已经指定了路由： queries_select POST /queries/select(.:format) queries#select_house

在 QueriesController 中对应的 response:

def select_house
  respond_to do |format|
    format.js
  end
end

这是待返回的 js.erb 模板:（就一句）

console.log("Javascript template is here");

就算不用 UJS 而改成 JSON Ajax（指定 Ajax 的 dataType 为 JSON，在 respond_to 里添加 json 类型）依然没有任何效果。不知道问题出在了哪里哇

自学 + 折腾两个月总算把网站弄出点眉目了，实验室老师突然说不让用 Rails 开发...

shaunli — Tue, 10 Mar 2015 09:43:38 +0800

唉，真郁闷。。现在前端要用 ExtJS，后端用 Java。自从学了 Ruby 以后就越看 Java 越不顺眼，结果还是要用 Java

ActiveRecord.all 的返回值是什么？

shaunli — Mon, 09 Mar 2015 11:09:38 +0800

在文档里没找到，所以问问大家

数据库里保存了 3 条 HouseType 记录：

id |   name   | description | area | amount |         created_at         |         updated_at         | meta
----+----------+-------------+------+--------+----------------------------+----------------------------+------
  1 | 午-A     | 2室2厅1卫   |   90 |    900 | 2015-03-09 02:15:04.751217 | 2015-03-09 02:15:04.751217 |    2
  2 | 午-A(反) | 2室2厅1卫   |   90 |    900 | 2015-03-09 02:15:04.753087 | 2015-03-09 02:15:04.753087 |    2
  3 | 丑-B     | 3室2厅1卫   |  140 |    300 | 2015-03-09 02:15:04.754353 | 2015-03-09 02:15:04.754353 |    3

在 Controller 中取出所有 house_type:

@house_types = HouseType.all

在 View 中打印@house_types，得到的结果是这样的：

{
  2 => [
    #<HouseType id: 1, name: "午-A", description: "2室2厅1卫", area: 90, amount: 900, created_at: "2015-03-09 02:15:04", updated_at: "2015-03-09 02:15:04", meta: 2>, 
    #<HouseType id: 2, name: "午-A(反)", description: "2室2厅1卫", area: 90, amount: 900, created_at: "2015-03-09 02:15:04", updated_at: "2015-03-09 02:15:04", meta: 2>
  ], 
  3 => [
   #<HouseType id: 3, name: "丑-B", description: "3室2厅1卫", area: 140, amount: 300, created_at: "2015-03-09 02:15:04", updated_at: "2015-03-09 02:15:04", meta: 3>
  ]
}

可以看出，是个 hash，有两个 pair，第一个 pair 的 key 是 2，value 是保存了前两个 HouseType 数据的 array；第二个 pair 的 key 是 3，value 是保存了剩下一个 HouseType 数据

我有点迷惑：为什么不是直接返回一个包含所有 HouseType 的 array，而是返回这样一个奇怪的 hash 呢？还有，返回的 hash 中的 key 是什么意思？

一小段简单的 Ruby 代码，不知道为什么会栈溢出

shaunli — Sun, 08 Mar 2015 15:41:34 +0800

《七周七语言》的练习题，当前目录下有一个 RubyCSV.txt 的文件，文件内容是：

one, two
lion, tiger

写一段代码读文件，并支持如下操作：

csv = RubyCSV.new
csv.each {|row| puts row.one} # 打印one那一列

这是我的代码：

# -*- coding: utf-8 -*-
class CSVRow
  def method_missing name, *args
    puts name # <--------- 此句为了debug
    row.key?(name.to_s) ? row[name.to_s] : nil
  end

  def initialize(headers, row)
    @row = Hash[headers.zip(row)]
  end
end

module CSVEnumerate
  def each(&block)
    csv_contents.each &block
  end
end

class ActsAsCSV
  include CSVEnumerate

  def read
    file = File.new(self.class.to_s.downcase + '.txt')
    @headers = file.gets.chomp.split(', ')

    file.each do |row|
      @result << CSVRow.new(@headers, row.chomp.split(', '))
    end
  end

  def headers
    @headers
  end

  def csv_contents
    @result
  end

  def initialize
    @result = []
    read
  end
end

class RubyCSV < ActsAsCSV
end

这是测试代码：

csv = RubyCSV.new
csv.each {|row| puts row.one}

结果发现在 method_missing 处爆栈了，试着打印 name 参数（puts name 这一句），发现打印了无数条 row，说明一直在调用这个方法。可是代码中明明没有调用任何 row 方法啊？不知道是为什么。

请高手帮我看看错在哪里了。谢谢:D

如何仅用 each 实现 each_slice 的功能？

shaunli — Sat, 07 Mar 2015 10:08:58 +0800

选自《七周七语言》的 Ruby 部分：

有一个数组，包含 16 个数字。仅用 each 方法打印数组中的内容，一次打印 4 个数字。然后，用可枚举模块的 each_slice 方法重做一遍

我想问如何仅用 each 实现 each_slice 的功能？我的想法很丑陋：

sequence = (1..16)
buffer = []
count = 0
sequence.each do |e|
  buffer << e
  if buffer.size >= 4
    p buffer
    buffer = []
  end
end

有没有更好的方法呢？

如何循环遍历散列表？

shaunli — Sat, 07 Mar 2015 00:17:46 +0800

《七周七语言》里面 Ruby 章节的练习题：如何循环遍历散列表

本人刚接触 Ruby，不是很熟悉，对这个问题的第一反映还是像写 C++ 和 Java 一样，比如：

hash_table = {a: 1, b: 2, c: 3}

loop do
  hash_table.each {|k, v| puts(k, v)}
end

请问有没有更好的写法呢？

有没有比较好的通过 javascript 进行页面跳转的方式

shaunli — Tue, 30 Dec 2014 15:54:01 +0800

我的页面上有一副 svg 图，要给其中的图形绑定点击事件，实现点击图形跳转到其他页面的功能。因为在 svg 上绑定事件，所以只能通过 javascript 来跳转了。

比如：

window.location.href=<URL>

或者：

window.navigate(<URL>);

可是这样写不太好，因为需要知道 URL，破坏了 Rails 的路由 - 控制器的透明关系。初学 Rails，不太熟，我想，是否借助 coffeescript 内嵌 helper 可以解决？感觉有点麻烦啊。有没有其他的解决办法？大家遇到这种必须通过 javascript 跳转的情况都是怎么解决的呢？

谢谢:)

补充：自己想明白了，URL 还是会经过 Rails server 路由中转的。让大家见笑了 T-T