Vue.js

Appearance

On this page

સિક્યુરિટી (Security) ​

નબળાઈઓ (Vulnerabilities) ની જાણ કરવી ​

જ્યારે કોઈ સુરક્ષાની નબળાઈની જાણ કરવામાં આવે છે, ત્યારે તે તરત જ અમારી સર્વોચ્ચ ચિંતાનો વિષય બની જાય છે, જેમાં પૂર્ણ-સમયના ફાળો આપનાર તેના પર કામ કરવા માટે બધું જ છોડી દે છે. નબળાઈની જાણ કરવા માટે, કૃપા કરીને security@vuejs.org પર ઈમેલ કરો.

નવી નબળાઈઓની શોધ દુર્લભ હોવા છતાં, અમે હંમેશા Vue અને તેની અધિકૃત સાથી લાઇબ્રેરીઓના લેટેસ્ટ વર્ઝનનો ઉપયોગ કરવાની ભલામણ કરીએ છીએ જેથી તમારી એપ્લિકેશન શક્ય તેટલી સુરક્ષિત રહે.

નિયમ નં. ૧: ક્યારેય પણ બિન-વિશ્વસનીય ટેમ્પલેટ્સનો ઉપયોગ કરશો નહીં ​

Vue નો ઉપયોગ કરતી વખતે સૌથી મૂળભૂત સુરક્ષા નિયમ એ છે કે તમારા ઘટક ટેમ્પલેટ તરીકે ક્યારેય બિન-વિશ્વસનીય સામગ્રીનો ઉપયોગ કરશો નહીં. આમ કરવું એ તમારી એપ્લિકેશનમાં મનસ્સી રીતે JavaScript એક્ઝિક્યુશનની મંજૂરી આપવા સમાન છે - અને વધુ ગંભીર બાબત એ છે કે, જો સર્વર-સાઇડ રેન્ડરિંગ દરમિયાન કોડ એક્ઝિક્યુટ કરવામાં આવે તો તે સર્વર ડેટા લીક તરફ દોરી શકે છે. આવા વપરાશનું ઉદાહરણ:

js
Vue.createApp({
  template: `<div>` + userProvidedString + `</div>` // આ ક્યારેય કરશો નહીં (NEVER DO THIS)
}).mount('#app')

Vue ટેમ્પલેટ્સ JavaScript માં કમ્પાઇલ કરવામાં આવે છે, અને ટેમ્પલેટ્સની અંદરના એક્સપ્રેશન્સ રેન્ડરિંગ પ્રક્રિયાના ભાગ રૂપે એક્ઝિક્યુટ કરવામાં આવશે. જો કે એક્સપ્રેશન્સનું મૂલ્યાંકન વિશિષ્ટ રેન્ડરિંગ સંદર્ભમાં કરવામાં આવે છે, સંભવિત વૈશ્વિક એક્ઝિક્યુશન વાતાવરણની જટિલતાને કારણે, Vue જેવા ફ્રેમવર્ક માટે અવાસ્તવિક પર્ફોર્મન્સ ઓવરહેડ વિના સંભવિત દૂષિત કોડ એક્ઝિક્યુશનથી તમને સંપૂર્ણપણે બચાવવા અવ્યવહારુ છે. આ શ્રેણીની સમસ્યાઓથી બચવા માટેનો સૌથી સીધો રસ્તો એ ખાતરી કરવાનો છે કે તમારા Vue ટેમ્પલેટ્સની સામગ્રી હંમેશા વિશ્વસનીય હોય અને સંપૂર્ણપણે તમારા દ્વારા નિયંત્રિત હોય.

Vue તમારું રક્ષણ કરવા માટે શું કરે છે (What Vue Does to Protect You) ​

HTML કન્ટેન્ટ ​

ટેમ્પલેટ્સ અથવા રેન્ડર ફંક્શન્સનો ઉપયોગ કરતા હોવ, કન્ટેન્ટ આપમેળે એસ્કેપ (escaped) થઈ જાય છે. તેનો અર્થ એ કે આ ટેમ્પલેટમાં:

template
<h1>{{ userProvidedString }}</h1>

જો userProvidedString માં આ શામેલ હોય:

js
'<script>alert("hi")</script>'

તો તે નીચેના HTML માં એસ્કેપ થઈ જશે:

template
&lt;script&gt;alert(&quot;hi&quot;)&lt;/script&gt;

આ રીતે સ્ક્રિપ્ટ ઇન્જેક્શન અટકાવવામાં આવે છે. આ એસ્કેપિંગ textContent જેવા નેટિવ બ્રાઉઝર APIs નો ઉપયોગ કરીને કરવામાં આવે છે, તેથી જો બ્રાઉઝર પોતે જ અસુરક્ષિત હોય તો જ નબળાઈ અસ્તિત્વમાં હોઈ શકે છે.

એટ્રિબ્યુટ બાઇન્ડિંગ્સ (Attribute bindings) ​

તેવી જ રીતે, ડાયનેમિક એટ્રિબ્યુટ બાઇન્ડિંગ્સ પણ આપમેળે એસ્કેપ થઈ જાય છે. તેનો અર્થ એ કે આ ટેમ્પલેટમાં:

template
<h1 :title="userProvidedString">
  નમસ્તે
</h1>

જો userProvidedString માં આ શામેલ હોય:

js
'" onclick="alert(\'hi\')'

તો તે નીચેના HTML માં એસ્કેપ થઈ જશે:

template
&quot; onclick=&quot;alert('hi')

આમ નવા, મનસ્વી HTML ઇન્જેક્ટ કરવા માટે title એટ્રિબ્યુટના સમાપ્તિને અટકાવે છે. આ એસ્કેપિંગ setAttribute જેવા નેટિવ બ્રાઉઝર APIs નો ઉપયોગ કરીને કરવામાં આવે છે, તેથી જો બ્રાઉઝર પોતે જ અસુરક્ષિત હોય તો જ નબળાઈ અસ્તિત્વમાં હોઈ શકે છે.

સંભવિત જોખમો (Potential Dangers) ​

કોઈપણ વેબ એપ્લિકેશનમાં, અનસેનિટાઈઝડ, યુઝર-પ્રોવાઈડેડ કન્ટેન્ટને HTML, CSS અથવા JavaScript તરીકે એક્ઝિક્યુટ કરવાની મંજૂરી આપવી સંભવિત રીતે જોખમી છે, તેથી શક્ય હોય ત્યાં સુધી તેને ટાળવું જોઈએ. જોકે, ક્યારેક અમુક જોખમ સ્વીકાર્ય હોઈ શકે છે.

ઉદાહરણ તરીકે, CodePen અને JSFiddle જેવી સેવાઓ યુઝર દ્વારા પૂરી પાડવામાં આવેલ કન્ટેન્ટને એક્ઝિક્યુટ કરવાની મંજૂરી આપે છે, પરંતુ તે એવા સંદર્ભમાં છે જ્યાં આ અપેક્ષિત છે અને અમુક અંશે જો ઈફ્રેમ (iframes) ની અંદર સેન્ડબોક્સીંગ કરવામાં આવ્યું હોય. જે કિસ્સાઓમાં કોઈ મહત્વપૂર્ણ સુવિધા સ્વાભાવિક રીતે અસુરક્ષિત હોય ત્યારે નબળાઈના અમુક સ્તરની આવશ્યકતા હોય છે, ત્યારે તમારી ટીમે સુવિધાના મહત્વ અને નબળાઈને સક્ષમ કરતા સૌથી ખરાબ કિસ્સાઓ સામે તેનું મૂલ્યાંકન કરવાનું રહે છે.

HTML ઇન્જેક્શન (HTML Injection) ​

જેમ કે તમે અગાઉ શીખ્યા છો, Vue આપમેળે HTML કન્ટેન્ટને એસ્કેપ કરે છે, જે તમને તમારી એપ્લિકેશનમાં આકસ્મિક રીતે એક્ઝિક્યુટેબલ HTML ઇન્જેક્ટ કરતા અટકાવે છે. જો કે, એવા કિસ્સાઓમાં કે જ્યાં તમે જાણો છો કે HTML સુરક્ષિત છે, તમે સ્પષ્ટપણે HTML કન્ટેન્ટ રેન્ડર કરી શકો છો:

  • ટેમ્પલેટનો ઉપયોગ કરીને:

    template
    <div v-html="userProvidedHtml"></div>

  • રેન્ડર ફંક્શનનો ઉપયોગ કરીને:

    js
    h('div', {
  innerHTML: this.userProvidedHtml
})

  • JSX સાથે રેન્ડર ફંક્શનનો ઉપયોગ કરીને:

    jsx
    <div innerHTML={this.userProvidedHtml}></div>

WARNING

વપરાશકર્તા દ્વારા પૂરા પાડવામાં આવેલ HTML ને ક્યારેય ૧૦૦% સુરક્ષિત ગણી શકાય નહીં સિવાય કે તે સેન્ડબોક્સ્ડ ઇફ્રેમમાં (sandboxed iframe) હોય અથવા એપ્લિકેશનના એવા ભાગમાં હોય કે જ્યાં માત્ર તે લખનાર વપરાશકર્તા જ તેના સંપર્કમાં હોય. વધારામાં, વપરાશકર્તાઓને તેમના પોતાના Vue ટેમ્પલેટ્સ લખવાની મંજૂરી આપવી તે સમાન જોખમો લાવે છે.

URL ઇન્જેક્શન (URL Injection) ​

આવી URL માં:

template
<a :href="userProvidedUrl">
  મને ક્લિક કરો
</a>

જો URL ને javascript: નો ઉપયોગ કરીને JavaScript એક્ઝિક્યુશન અટકાવવા માટે "સેનિટાઇઝ (sanitize)" કરવામાં આવી ન હોય તો સંભવિત સુરક્ષા સમસ્યા છે. આમાં મદદ કરવા માટે sanitize-url જેવી લાઇબ્રેરીઓ છે, પરંતુ નોંધ લો: જો તમે ક્યારેય ફ્રન્ટએન્ડ પર URL સેનિટાઇઝેશન કરી રહ્યાં છો, તો તમારી પાસે પહેલેથી જ સુરક્ષા સમસ્યા છે. વપરાશકર્તા દ્વારા પૂરી પાડવામાં આવેલ URLs ને ડેટાબેઝમાં સાચવતા પહેલા તમારા બેકએન્ડ દ્વારા હંમેશા સેનિટાઇઝ કરવી જોઈએ. પછી તમારા API સાથે કનેક્ટ થતા નેટિવ મોબાઇલ એપ્લિકેશન્સ સહિત દરેક ક્લાયંટ માટે સમસ્યા ટાળવામાં આવે છે. એ પણ નોંધ લો કે સેનિટાઇઝ્ડ URLs સાથે પણ, Vue તમને ગેરંટી આપવામાં મદદ કરી શકતું નથી કે તેઓ સુરક્ષિત સ્થાનો પર દોરી જશે.

સ્ટાઇલ ઇન્જેક્શન (Style Injection) ​

આ ઉદાહરણ જુઓ:

template
<a
  :href="sanitizedUrl"
  :style="userProvidedStyles"
>
  મને ક્લિક કરો
</a>

ચાલો માની લઈએ કે sanitizedUrl સેનિટાઇઝ કરવામાં આવી છે, જેથી તે ચોક્કસપણે એક વાસ્તવિક URL છે અને JavaScript નથી. userProvidedStyles સાથે, દૂષિત વપરાશકર્તાઓ હજુ પણ "ક્લિક જેક (click jack)" માટે CSS પ્રદાન કરી શકે છે, દા.ત. લિંકને "Log in" બટન પર પારદર્શક બોક્સમાં સ્ટાઇલ કરવી. પછી જો https://user-controlled-website.com/ તમારી એપ્લિકેશનના લોગિન પેજ જેવું દેખાવા માટે બનાવવામાં આવ્યું હોય, તો તેઓએ વપરાશકર્તાની વાસ્તવિક લોગિન માહિતી કેપ્ચર કરી હોઈ શકે છે.

તમે કલ્પના કરી શકશો કે કેવી રીતે <style> એલિમેન્ટ માટે યુઝર-પ્રોવાઈડેડ કન્ટેન્ટની મંજૂરી આપવી તે વધુ મોટી નબળાઈ ઊભી કરશે, જે વપરાશકર્તાને આખા પેજને કેવી રીતે સ્ટાઇલ કરવી તેના પર સંપૂર્ણ નિયંત્રણ આપે છે. તેથી જ Vue ટેમ્પલેટ્સની અંદર સ્ટાઇલ ટૅગ્સના રેન્ડરિંગને અટકાવે છે, જેમ કે:

template
<style>{{ userProvidedStyles }}</style>

તમારા વપરાશકર્તાઓને ક્લિકજેકિંગથી સંપૂર્ણપણે સુરક્ષિત રાખવા માટે, અમે માત્ર સેન્ડબોક્સ્ડ ઇફ્રેમની અંદર CSS પર સંપૂર્ણ નિયંત્રણની મંજૂરી આપવાની ભલામણ કરીએ છીએ. વૈકલ્પિક રીતે, જ્યારે સ્ટાઇલ બાઇન્ડિંગ દ્વારા વપરાશકર્તા નિયંત્રણ પ્રદાન કરવામાં આવે, ત્યારે અમે તેના ઓબ્જેક્ટ સિન્ટેક્સ (object syntax) નો ઉપયોગ કરવાની ભલામણ કરીએ છીએ અને વપરાશકર્તાઓને માત્ર તે વિશિષ્ટ પ્રોપર્ટીઝ માટે વેલ્યુઝ પ્રદાન કરવાની મંજૂરી આપે છે જે તેમના માટે નિયંત્રિત કરવા માટે સુરક્ષિત છે, આના જેવી:

template
<a
  :href="sanitizedUrl"
  :style="{
    color: userProvidedColor,
    background: userProvidedBackground
  }"
>
  મને ક્લિક કરો
</a>

JavaScript ઇન્જેક્શન (JavaScript Injection) ​

અમે Vue સાથે <script> એલિમેન્ટ રેન્ડર કરવા માટે સખત નિરુત્સાહિત કરીએ છીએ, કારણ કે ટેમ્પલેટ્સ અને રેન્ડર ફંક્શન્સમાં ક્યારેય આડઅસરો (side effects) હોવી જોઈએ નહીં. જો કે, રનટાઇમ પર JavaScript તરીકે મૂલ્યાંકન કરવામાં આવતી સ્ટ્રિંગ્સનો સમાવેશ કરવાનો આ એકમાત્ર રસ્તો નથી.

દરેક HTML એલિમેન્ટમાં JavaScript ની સ્ટ્રિંગ સ્વીકારતા મૂલ્યો સાથેના એટ્રિબ્યુટ્સ હોય છે, જેમ કે onclick, onfocus અને onmouseenter. આમાંના કોઈપણ ઇવેન્ટ એટ્રિબ્યુટ્સમાં વપરાશકર્તા દ્વારા પૂરી પાડવામાં આવેલ JavaScript ને બાઈન્ડ કરવું એ સંભવિત સુરક્ષા જોખમ છે, તેથી તેને ટાળવું જોઈએ.

WARNING

વપરાશકર્તા દ્વારા પૂરી પાડવામાં આવેલ JavaScript ને ક્યારેય ૧૦૦% સુરક્ષિત ગણી શકાય નહીં સિવાય કે તે સેન્ડબોક્સ્ડ ઇફ્રેમમાં હોય અથવા એપ્લિકેશનના એવા ભાગમાં હોય કે જ્યાં માત્ર તે લખનાર વપરાશકર્તા જ તેના સંપર્કમાં હોય.

ક્યારેક અમને Vue ટેમ્પલેટ્સમાં ક્રોસ-સાઇટ સ્ક્રિપ્ટીંગ (XSS) કેવી રીતે શક્ય છે તે અંગે નબળાઈના અહેવાલો મળે છે. સામાન્ય રીતે, અમે આવા કેસોને વાસ્તવિક નબળાઈઓ માનતા નથી કારણ કે વિકાસકર્તાઓને XSS ને મંજૂરી આપતી બે પરિસ્થિતિઓથી બચાવવાનો કોઈ વ્યવહારુ રસ્તો નથી:

૧. ડેવલપર્સ સ્પષ્ટપણે Vue ને વપરાશકર્તા દ્વારા પ્રદાન કરેલ, અનસેનિટાઈઝડ કન્ટેન્ટને Vue ટેમ્પલેટ્સ તરીકે રેન્ડર કરવા માટે કહી રહ્યા છે. આ સ્વાભાવિક રીતે અસુરક્ષિત છે, અને Vue પાસે તેની ઉત્પત્તિ જાણવાનો કોઈ રસ્તો નથી.

૨. ડેવલપર આખું HTML પેજ માઉન્ટ કરી રહ્યા છે જેમાં સર્વર-રેન્ડર્ડ અને યુઝર-પ્રોવાઈડેડ કન્ટેન્ટ હોય છે. આ મૂળભૂત રીતે #૧ જેવી જ સમસ્યા છે, પરંતુ ક્યારેક ડેવલપર્સ તેને સમજ્યા વિના કરી શકે છે. આ સંભવિત નબળાઈઓ તરફ દોરી શકે છે જ્યાં હુમલાખોર HTML પ્રદાન કરે છે જે સાદા HTML તરીકે સુરક્ષિત છે પરંતુ Vue ટેમ્પલેટ તરીકે અસુરક્ષિત છે. શ્રેષ્ઠ પ્રેક્ટિસ એ છે કે કોઈપણ સમયે એવા નોડ્સ પર Vue ને માઉન્ટ ન કરો જે સર્વર-રેન્ડર્ડ અને યુઝર-પ્રોવાઈડ કરેલ કન્ટેન્ટ ધરાવે છે.

શ્રેષ્ઠ પ્રેક્ટિસિસ (Best Practices) ​

સામાન્ય નિયમ એ છે કે જો તમે અનસેનિટાઈઝડ, યુઝર-પ્રોવાઈડેડ કન્ટેન્ટને એક્ઝિક્યુટ કરવાની મંજૂરી આપો છો (HTML, JavaScript અથવા તો CSS તરીકે), તો તમે તમારી જાતને હુમલાઓ માટે ખુલ્લા કરી શકો છો. આ સલાહ ખરેખર સાચી છે પછી ભલે તમે Vue નો ઉપયોગ કરો, અન્ય ફ્રેમવર્ક અથવા તો કોઈ ફ્રેમવર્ક નહીં.

સંભવિત જોખમો માટે ઉપર આપેલી ભલામણો ઉપરાંત, અમે તમને આ સંસાધનોથી પરિચિત થવાની ભલામણ કરીએ છીએ:

પછી તમે જે શીખો તેનો ઉપયોગ તમારી ડિપેન્ડન્સીસના સોર્સ કોડની સંભવિત જોખમી પેટર્ન માટે સમીક્ષા કરવા માટે પણ કરો, જો તેમાંના કોઈ પણ તૃતીય-પક્ષ ઘટકોનો સમાવેશ કરે છે અથવા અન્યથા DOM માં જે રેન્ડર થાય છે તેના પર પ્રભાવ પાડે છે.

બેકએન્ડ સંકલન (Backend Coordination) ​

HTTP સુરક્ષા નબળાઈઓ, જેમ કે ક્રોસ-સાઇટ રિક્વેસ્ટ ફોર્જરી (CSRF/XSRF) અને ક્રોસ-સાઇટ સ્ક્રિપ્ટ ઇનક્લુઝન (XSSI), મુખ્યત્વે બેકએન્ડ પર સંબોધવામાં આવે છે, તેથી તે Vue ની ચિંતા નથી. જો કે, તમારી બેકએન્ડ ટીમ સાથે વાતચીત કરવી તે હજુ પણ સારો વિચાર છે કે તેમના API સાથે શ્રેષ્ઠ રીતે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરવી, દા.ત., ફોર્મ સબમિશન સાથે CSRF ટોકન્સ સબમિટ કરીને.

સર્વર-સાઇડ રેન્ડરિંગ (Server-Side Rendering - SSR) ​

SSR નો ઉપયોગ કરતી વખતે કેટલીક વધારાની સુરક્ષા ચિંતાઓ હોય છે, તેથી નબળાઈઓ ટાળવા માટે અમારા SSR દસ્તાવેજો માં દર્શાવેલ શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરવાની ખાતરી કરો.

Edit this page on GitHub