使用查询字符串值安全地设置输入值

时间:2013-11-05 19:11:05

标签: javascript jquery forms uri

我有一个<input type="text">,我想安全地将它的值设置为“q”查询字符串。因为如果查询字符串包含特殊字符(+,#,...),JS将停止执行。

我已尝试encodeURIComponent()encodeURI(),但搜索框中的值也会被转义,因此您会在搜索框中看到一些奇怪的内容。

我也试过decodeURIComponent(encodeURIComponent())但这会让JS停止执行。

此外,PHP不是我想要使用的解决方案,所以让我们忘记PHP GET,即使它有效。

尝试错误:http://smartsearch.altervista.org/?q=the+plus+character+breaks+the+code

正如您所看到的那样,面板不再起作用(单击工具栏按钮,它们应显示一个面板)。当没有包含特殊字符的查询字符串时,面板可以正常工作。

完整代码(有些人要求):

$(function() {
if(getParameter("q") && getParameter("engine")) {
        search(getParameter("q").replace("smartsearch://",""),getParameter("engine"));
    }
    else if(getParameter("engine")) {
        $(".search-engine a[data-engine-shortname="+getParameter("engine")+"]").click();
    }
    else if(getParameter("q")) {
        search(getParameter("q").replace("smartsearch://",""));
    }
    });
// Helper functions
function getParameter(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function search(query,engine) {
    var searchengine = engine || $(".search-engine.selected a").attr("data-engine-shortname");
    var searchengineurl = $(".search-engine a[data-engine-shortname="+engine+"]").attr("data-engine-url") || $("#search-form").attr("action");
    var searchquery = query || $("#search-input").val();
    var currenturl = "?q=" + searchquery.split(' ').join('+') + "&engine=" + searchengine;
    var icon = $(".search-engine a[data-engine-shortname="+engine+"] img").attr("src") || $(".search-engine.selected a img").attr("src");
    if($.trim(searchquery) != "") {
        $("#results-frame").attr("src",searchengineurl + searchquery);
        $("title").html(searchquery + " - SmartSearch");
        history.replaceState(null, null, currenturl);
        if(engine) {
            $(".search-engine a[data-engine-shortname="+engine+"]").click();
        }
        $("#search-input").val(searchquery);
        $("#favourite-button").removeClass("starred disabled");
        if(bookmarks.check(searchquery,searchengine)) {
            $("#favourite-button").addClass("starred");
        }
    }
    else {
        $("title").html("SmartSearch");
        $("#favourite-button").addClass("disabled");
        $("#favourite-button").removeClass("starred");
        if(bookmarks.check(searchquery,searchengine)) {
            $("#favourite-button").addClass("starred");
        }
    }
}

1 个答案:

答案 0 :(得分:0)

如果您参考http://tools.ietf.org/html/rfc3986#section-2.2

的部分
 reserved    = gen-delims / sub-delims

 gen-delims  = ":" / "/" / "?" / "#" / "[" / "]" / "@"

 sub-delims  = "!" / "$" / "&" / "'" / "(" / ")"
             / "*" / "+" / "," / ";" / "="

RFC接着说

  

如果URI组件的数据与保留的数据冲突          字符作为分隔符的目的,那么冲突的数据必须是          在URI形成之前进行百分比编码。