ජාවාස්ක්‍රිප්ට් භාවිතයෙන් යූආර්එල් එකක් ආරක්ෂිතව කේතනය කරන්නේ කෙසේද?

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;

මම හිතන්නේ ඔබට myUrlඑම දෙවන පේළියේ විචල්‍යය සංකේතනය කළ යුතුද?

සාදන ලද ශ්‍රිතය encodeURIComponent (str) සහ encodeURI (str) පරීක්ෂා කරන්න .
ඔබේ නඩුවේදී, මෙය ක්‍රියාත්මක විය යුතුය:

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

ඔබට විකල්ප තුනක් ඇත:

• escape() කේතනය නොකරනු ඇත: @*/+

• encodeURI() කේතනය නොකරනු ඇත: ~!@#$&*()=:/,;?+'

• encodeURIComponent() කේතනය නොකරනු ඇත: ~!*()'

නමුත් ඔබේ නඩුව, ඔබ සමත් කිරීමට අවශ්ය නම් URL එක බවට GETවෙනත් පිටුවේ පරාමිතිය, ඔබ භාවිතා කළ යුත්තේ escapeහෝ encodeURIComponent, නමුත්encodeURI .

Stack Overflow ප්‍රශ්නය බලන්න හොඳම පුහුණුව: පැන යාම, හෝ encodeURI / encodeURIComponent වැඩිදුර සාකච්ඡා සඳහා .

සමඟ රැඳී සිටින්න encodeURIComponent(). encodeURI()URL වල අර්ථකථන වැදගත්කමක් ඇති බොහෝ අක්ෂර කේතනය කිරීමට ශ්‍රිතය කරදර වන්නේ නැත (උදා: "#", "?", සහ "&").escape()"+" අක්ෂර කේතනය කිරීමට කරදර නොවන අතර එය සේවාදායකයේ කේතනය කළ අවකාශයක් ලෙස අර්ථ දැක්වෙනු ඇත (සහ මෙහි වෙනත් අය පෙන්වා දී ඇති පරිදි ASCII නොවන අක්ෂර නිසි ලෙස URL- කේතනය නොකරයි).

සහ වෙනත් තැන් අතර වෙනසencodeURI()encodeURIComponent() පිළිබඳ හොඳ පැහැදිලි කිරීමක් තිබේ . ඔබට යමක් සංකේතනය කිරීමට අවශ්‍ය නම් එය ආරක්ෂිතව යූආර්අයි හි සංරචකයක් ලෙස ඇතුළත් කළ හැකිය (උදා: විමසුම් නූල් පරාමිතියක් ලෙස), ඔබට භාවිතා කිරීමට අවශ්‍යය encodeURIComponent().

හොඳම පිළිතුර නම් විමසුම් දාමයේ අගයන් භාවිතා encodeURIComponentකිරීමයි (සහ වෙනත් තැනක).

කෙසේ වෙතත්, බොහෝ ඒපීඅයි වලට "" "වෙනුවට ආදේශ කිරීමට අවශ්‍ය බව මට පෙනී ගියේය, එබැවින් මට පහත සඳහන් දෑ භාවිතා කිරීමට සිදුවිය:

const value = encodeURIComponent(value).replace('%20','+');
const url = 'http://example.com?lang=en&key=' + value

escapeවිවිධ බ්‍රව්සර්වල වෙනස් ආකාරයකින් ක්‍රියාත්මක වන අතර encodeURIබොහෝ අක්ෂර සංකේතවත් නොකරයි (# සහ පවා / වැනි) - එය සම්පූර්ණ යූආර්අයි / යූආර්එල් එකකින් තොරව භාවිතා නොකිරීමට භාවිතා කර ඇත - එය සුපිරි ප්‍රයෝජනවත් හෝ ආරක්ෂිත නොවේ.

Oc ජොකෙම් පහත පෙන්වා ඇති පරිදි, ඔබට encodeURIComponent()(එක් එක්) ෆෝල්ඩර නාමයක් භාවිතා කිරීමට අවශ්‍ය විය හැකිය , නමුත් කුමන හේතුවක් නිසා හෝ ඒපීඅයි +ෆෝල්ඩර නාම වලින් අවශ්‍ය නොවන බව පෙනේ encodeURIComponent.

උදාහරණයක්:

const escapedValue = encodeURIComponent(value).replace('%20','+');
const escapedFolder = encodeURIComponent('My Folder'); // no replace
const url = `http://example.com/${escapedFolder}/?myKey=${escapedValue}`;

ඔබ jQuery භාවිතා කරන්නේ නම් මම $.paramක්‍රමයට යන්නෙමි . එය URL මඟින් වස්තු සිතියම්කරණ ක්ෂේත්‍රයන් අගයන් වෙත සංකේතවත් කරයි, එය එක් එක් අගය මත ගැලවීමේ ක්‍රමයක් ඇමතීමට වඩා කියවීමට පහසුය.

$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1

encodeURIComponent () යනු යා යුතු මාර්ගයයි.

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

නමුත් php අනුවාදයෙන් කුඩා වෙනස්කම් ඇති බව ඔබ මතක තබා ගත යුතු අතර urlencode()@CMS සඳහන් කළ පරිදි එය සෑම වර්‍ගයක්ම කේතනය නොකරනු ඇත. Http://phpjs.org/functions/urlencode/ හි යාලුවනේ js සමාන phpencode():

function urlencode(str) {
  str = (str + '').toString();

  // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
  // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
  return encodeURIComponent(str)
    .replace('!', '%21')
    .replace('\'', '%27')
    .replace('(', '%28')
    .replace(')', '%29')
    .replace('*', '%2A')
    .replace('%20', '+');
}

URL එකක් කේතනය කිරීම සඳහා, කලින් පවසා ඇති පරිදි, ඔබට කාර්යයන් දෙකක් ඇත:

encodeURI()

සහ

encodeURIComponent()

දෙකම පැවතීමට හේතුව, පළමුවැන්න බොහෝ දේ නිරුපද්‍රිතව තබා ගැනීමේ අවදානම සමඟ URL ය ආරක්ෂා කරන අතර දෙවැන්න අවශ්‍ය සියල්ල සංකේතවත් කරයි.

පළමුවැන්න සමඟ, ඔබට අලුතින් පැන ගිය URL ලිපින තීරුවට පිටපත් කළ හැකිය (නිදසුනක් ලෙස) එය ක්‍රියාත්මක වනු ඇත. කෙසේ වෙතත්, ඔබගේ නිරුපද්‍රිතව ක්ෂේත්‍ර පරිසීමකයන්ට බාධා ඇති කරයි, '=' ක්ෂේත්‍ර නාම සහ අගයන්ට බාධා ඇති කරයි, සහ '+' අවකාශය මෙන් පෙනේ. නමුත් සරල දත්ත සඳහා, ඔබ පැන යන දෙයෙහි URL ස්වභාවය ආරක්ෂා කර ගැනීමට අවශ්‍ය විට, මෙය ක්‍රියාත්මක වේ.

දෙවැන්න නම්, ඔබේ නූලෙහි කිසිවක් URL එකකට බාධා නොවන බවට වග බලා ගැනීම සඳහා ඔබ කළ යුතු සියල්ල ය. එමඟින් විවිධාකාර වැදගත් නොවන අක්ෂර නිරුපද්‍රිතව ඉතිරි වන අතර එමඟින් URL ය හැකි තරම් මිනිස් කියවිය හැකි පරිදි බාධාවකින් තොරව පවතී. මේ ආකාරයෙන් සංකේතවත් කරන ලද URL යක් නිරුපණය නොකර URL ලෙස තවදුරටත් ක්‍රියා නොකරනු ඇත.

එබැවින් ඔබට කාලය ගත හැකි නම්, ඔබට සැමවිටම අවශ්‍ය වන්නේ encodeURIComponent () - නම / අගය යුගල එකතු කිරීමට පෙර විමසුම් නූලට එක් කිරීමට පෙර මෙම ශ්‍රිතය භාවිතා කරමින් නම සහ අගය යන දෙකම සංකේතවත් කරන්න.

එන්කෝඩියුරි () භාවිතා කිරීමට හේතු ඉදිරිපත් කිරීමට මට දුෂ්කර කාලයක් තිබේ - මම එය වඩා දක්ෂ පුද්ගලයින්ට තබමි.

ඒ හා සමාන දෙයක් මම සාමාන්‍ය ජාවාස්ක්‍රිප්ට් සමඟ උත්සාහ කළෙමි

function fixedEncodeURIComponent(str){
     return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

අලංකාර මාර්ගය

මගේ නිහතමානී මතය අනුව විමසුම් පරාමිතීන් කේතනය කිරීමේ වඩාත් අලංකාර ක්‍රමය වන්නේ පරාමිතීන් වැනි වස්තුවක් නිර්මාණය කිරීමයි

const queryParams = { param1: 'value1', param2: 'value2' }

ඉන්පසු එය කේතනය කරන්න:

const queryString = new URLSearchParams(queryParams).toString()

මෙම පිළිතුරේ සඳහන් පරිදි: https://stackoverflow.com/a/53171438/7284582

ද්විත්ව කේතීකරණය වැළැක්වීම සඳහා කේතීකරණය කිරීමට පෙර යූආර්එල් විකේතනය කිරීම හොඳ අදහසකි (ඔබ පරිශීලක ඇතුළු කළ යූආර්එල් සමඟ ගනුදෙනු කරන්නේ නම්, එය දැනටමත් කේතනය කර ඇති).

අපට abc%20xyz 123ආදාන ලෙස ඇති බව කියමු (එක් ඉඩක් දැනටමත් කේතනය කර ඇත):

encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"

URL කේතීකරණය යනු කුමක්ද:

URL තුළ විශේෂ අක්ෂර ඇති විට URL එකක් කේතනය කළ යුතුය. උදාහරණයක් වශයෙන්:

console.log(encodeURIComponent('?notEncoded=&+'));

මෙම උදාහරණයෙන් අපට නිරීක්ෂණය කළ හැකිය, නූල හැර අනෙක් සියලුම අක්ෂර notEncoded% සලකුණු වලින් කේතනය කර ඇත. URL කේතීකරණය ප්‍රතිශත කේතීකරණය ලෙසද හැඳින්වේ මන්ද එය% සමඟ ඇති සියලුම විශේෂ අක්ෂර වලින් ගැලවී යයි. මෙම% ලකුණෙන් පසු සෑම විශේෂ අක්ෂරයකටම අද්විතීය කේතයක් ඇත

අපට URL කේතීකරණය අවශ්‍ය වන්නේ ඇයි:

සමහර අක්ෂරවලට URL නූලක විශේෂ අගයක් ඇත. උදාහරණයක් ලෙස, ද? අක්‍ෂරයෙන් විමසුම් නූලක ආරම්භය දැක්වේ. වෙබයේ සම්පතක් සාර්ථකව සොයා ගැනීම සඳහා, අක්ෂරයක් නූල්වල කොටසක් හෝ යූආර්එල් ව්‍යුහයේ කොටසක් ලෙස අර්ථ දැක්වීමේදී වෙන්කර හඳුනා ගැනීම අත්‍යවශ්‍ය වේ.

JS හි URL කේතීකරණය අපට ලබා ගත හැක්කේ කෙසේද:

යූආර්එල් පහසුවෙන් කේතනය කිරීමට අපට භාවිතා කළ හැකි උපයෝගීතා ශ්‍රිතයක් ජේඑස් විසින් ඉදිරිපත් කරයි. මේවා පහසු විකල්ප දෙකකි:

1. encodeURIComponent(): යූආර්අයි හි සංරචකයක් තර්කයක් ලෙස ගෙන කේතනය කළ යූආර්අයි නූල නැවත ලබා දෙයි.
2. encodeURI(): යූආර්අයි එකක් තර්කයක් ලෙස ගෙන කේතනය කළ යූආර්අයි නූල නැවත ලබා දෙයි.

උදාහරණ සහ අවවාද:

සම්පූර්ණ URL එක තුළට නොපැමිණීම ගැන සැලකිලිමත් වන්න (යෝජනා ක්‍රමය ඇතුළුව, උදා: https: //) encodeURIComponent(). මෙය සැබවින්ම එය ක්‍රියාකාරී නොවන URL බවට පරිවර්තනය කළ හැකිය. උදාහරණයක් වශයෙන්:

// for a whole URI don't use encodeURIComponent it will transform
// the / characters and the URL won't fucntion properly
console.log(encodeURIComponent("http://www.random.com/specials&char.html"));

// instead use encodeURI for whole URL's
console.log(encodeURI("http://www.random.com/specials&char.html"));

encodeURIComponentෆෝවර්ඩ් කප්පාදුව (/) ද විශේෂ අක්ෂර බවට පරිවර්තනය වන බව අපි සම්පූර්ණ URL එක තැබූ බව අපට නිරීක්ෂණය කළ හැකිය . මෙය තවදුරටත් URL නිසි ලෙස ක්‍රියාත්මක නොවීමට හේතු වේ.

එබැවින් (නමට අනුව) භාවිතා කරන්න:

1. encodeURIComponent ඔබට කේතනය කිරීමට අවශ්‍ය URL එකක යම් කොටසක.
2. encodeURI ඔබට කේතනය කිරීමට අවශ්‍ය සම්පූර්ණ URL එකක.

මට කිසිවක් වැඩ කළේ නැත. මා දුටුවේ පිවිසුම් පිටුවේ HTML ය, 200 කේතය සමඟ නැවත සේවාදායකයාගේ පැත්තට පැමිණීමයි. පිවිසුම් පිටුවේ පෙළ).

පිවිසුම් පාලකයේ, මම මෙම පේළිය එක් කළෙමි:

Response.Headers["land"] = "login";

ගෝලීය අජැක්ස් හසුරුවන්නා තුළ මම මෙය කළෙමි:

$(function () {
    var $document = $(document);
    $document.ajaxSuccess(function (e, response, request) {
        var land = response.getResponseHeader('land');
        var redrUrl = '/login?ReturnUrl=' + encodeURIComponent(window.location);
        if(land) {
            if (land.toString() === 'login') {
                window.location = redrUrl;
            }
        }
    });
});

දැන් මට කිසිදු ගැටළුවක් නොමැති අතර එය චාම් එකක් මෙන් ක්‍රියා කරයි.

එන්කෝඩ් URL නූල්

    var url = $ ( ස්ථානය ). attr ( 'href' ); // වත්මන් url ලබා ගන්න // හෝ var url = 'folder / index.html? param = # 23dd & noob = yes' ; // හෝ එකක් සඳහන් කරන්න 
    
      


var encodedUrl = encodeURIComponent(url);
console.log(encodedUrl);
//outputs folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes


for more info go http://www.sitepoint.com/jquery-decode-url-string

මෙන්න මෙය නම් ලයිව් DEMO ක encodeURIComponent()හා decodeURIComponent()JS කාර්යයන් ඉදි:

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea{
        width:30%;
        height:100px;
      }
    </style>
    <script>
      // encode string to base64
      function encode()
      {
        var txt = document.getElementById("txt1").value;
        var result = btoa(txt);
        document.getElementById("txt2").value = result;
      }
      // decode base64 back to original string
      function decode()
      {
        var txt = document.getElementById("txt3").value;
        var result = atob(txt);
        document.getElementById("txt4").value = result;
      }
    </script>
  </head>
  <body>
    <div>
      <textarea id="txt1">Some text to decode
      </textarea>
    </div>
    <div>
      <input type="button" id="btnencode" value="Encode" onClick="encode()"/>
    </div>
    <div>
      <textarea id="txt2">
      </textarea>
    </div>
    <br/>
    <div>
      <textarea id="txt3">U29tZSB0ZXh0IHRvIGRlY29kZQ==
      </textarea>
    </div>
    <div>
      <input type="button" id="btndecode" value="Decode" onClick="decode()"/>
    </div>
    <div>
      <textarea id="txt4">
      </textarea>
    </div>
  </body>
</html>

ඔබ encodeURIComponent()කෙලින්ම භාවිතා නොකළ යුතුය .

RFC3986: ඒකාකාර සම්පත් හඳුනාගැනීමේ යන්ත්‍රය (URI) දෙස බලන්න: සාමාන්‍ය සින්ටැක්ස්

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

වෙන් කරන ලද අක්ෂරවල පරමාර්ථය යූආර්අයි තුළ ඇති වෙනත් දත්ත වලින් වෙන් කොට හඳුනාගත හැකි පරිසීමිත අක්ෂර සමූහයක් සැපයීමයි.

RFC3986 හි URI අර්ථ දැක්වීමෙන් වෙන් කර ඇති මෙම අක්ෂර ගැලවී නැත encodeURIComponent().

MDN වෙබ් ලියකියවිලි: encodeURIComponent ()

RFC 3986 (සංචිත!, ', (,), සහ *) පිළිපැදීමට වඩා දැඩි ලෙස කටයුතු කිරීම සඳහා, මෙම අක්ෂරවලට විධිමත් URI පරිසීමක භාවිතයන් නොතිබුණද, පහත සඳහන් දෑ ආරක්ෂිතව භාවිතා කළ හැකිය:

MDN වෙබ් ලියකියවිලි ශ්‍රිතය භාවිතා කරන්න ...

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

ඔබට පහත දැක්වෙන ශ්‍රිතය භාවිතයෙන් esapi පුස්තකාලය භාවිතා කර ඔබේ url කේතනය කළ හැකිය. ශ්‍රිතය මඟින් කේතකරණයේ '/' නැති නොවන බව සහතික වන අතර ඉතිරි පෙළ අන්තර්ගතය කේතනය කර ඇත:

function encodeUrl(url)
{
    String arr[] = url.split("/");
    String encodedUrl = "";
    for(int i = 0; i<arr.length; i++)
    {
        encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
        if(i<arr.length-1) encodedUrl = encodedUrl + "/";
    }
    return url;
}

https://www.owasp.org/index.php/ESAPI_JavaScript_Readme

RFC 3986fixedEncodeURIComponent සමඟ තදින් අනුකූල වීමට ශ්‍රිතය භාවිතා කරන්න :

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

කාර්ය සාධනය

අද (2020.06.12) ක්‍රෝම් 83.0, සෆාරි 13.1, ෆයර්ෆොක්ස් 77.0 යන බ්‍රව්සර් මත මැක් ඕස් හයිසෙයිරා 10.13.6 මත තෝරාගත් විසඳුම් සඳහා වේග පරීක්ෂණයක් සිදු කරමි. මෙම ප්‍රති results ල දැවැන්ත url කේතීකරණ සඳහා ප්‍රයෝජනවත් වේ.

නිගමන

• encodeURI(ආ) වේගවත් බව පෙනේ, නමුත් එය url-s සඳහා නිර්දේශ නොකරයි
• escape (අ) වේගවත් හරස් බ්‍රව්සර් විසඳුමකි
• එම්ඩීඑන් විසින් නිර්දේශිත එෆ් විසඳුම මධ්‍යම වේගවත් වේ
• D විසඳුම මන්දගාමී වේ

විස්තර

විසඳුම් සඳහා A B C D E F මම පරීක්ෂණ දෙකක් සිදු කරමි

• කෙටි url සඳහා - 50 char - ඔබට එය ක්‍රියාත්මක කළ හැකිය මෙතැන
• දිගු url සඳහා - 1M char - ඔබට එය ක්‍රියාත්මක කළ හැකිය මෙතැන

function A(url) {
	return escape(url);
}

function B(url) {
	return encodeURI(url);
}

function C(url) {
	return encodeURIComponent(url);
}

function D(url) {
	return new URLSearchParams({url}).toString();
}

function E(url){
     return encodeURIComponent(url).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

function F(url) {
  return encodeURIComponent(url).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}



// ----------
// TEST
// ----------

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";

[A,B,C,D,E,F]
  .forEach(f=> console.log(`${f.name} ?url=${f(myUrl).replace(/^url=/,'')}`));

This snippet only presents code of choosen solutions

Chrome සඳහා උදාහරණ ප්‍රති results ල