ស្វែងយល់ពីការចែករំលែកធនធានឆ្លងប្រភពដើម (CORS)

Cross-Origin Resource Sharing (CORS) ត្រូវបានណែនាំដោយ World Wide Web Consortium (W3C) ក្នុងឆ្នាំ 2006 ដើម្បីផ្ដល់ជូនម៉ាស៊ីនមេគេហទំព័រ នូវវិធីបញ្ជាក់ប្រភពដើមផ្សេងទៀត (ដែន គ្រោងការណ៍ ឬច្រក) ដែលត្រូវបានអនុញ្ញាតឱ្យចូលប្រើធនធានរបស់ម៉ាស៊ីនមេលើសពី គោលការណ៍ដើមដូចគ្នា។ នេះគឺជាការវិវឌ្ឍដ៏សំខាន់មួយនៅក្នុងសុវត្ថិភាពគេហទំព័រ ដោយបើកដំណើរការកម្មវិធីបណ្ដាញអន្តរកម្ម និងរួមបញ្ចូលគ្នាកាន់តែច្រើន ខណៈពេលដែលរក្សាបាននូវពិធីការសុវត្ថិភាពដ៏តឹងរឹង។

ការយល់ដឹងអំពីយន្តការនៃ CORS (ការចែករំលែកធនធានឆ្លងប្រភព) គឺមានសារៈសំខាន់សម្រាប់ការអភិវឌ្ឍន៍គេហទំព័រទំនើប។ ផ្នែកនេះពន្យល់ពីរបៀបដែល CORS បង្កើនសុវត្ថិភាពគេហទំព័រ បែងចែករវាងសំណើសាមញ្ញ និងមុនការហោះហើរ និងពន្យល់ពីសារៈសំខាន់នៃបឋមកថា CORS ។

CORS (ការចែករំលែកធនធានឆ្លងប្រភពដើម) គឺជាយន្តការដែលប្រើបឋមកថា HTTP ដើម្បីប្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិត ដើម្បីអនុញ្ញាតឱ្យកម្មវិធីគេហទំព័រដែលដំណើរការនៅប្រភពដើមមួយ (ដែន) មានសិទ្ធិចូលប្រើធនធានដែលបានជ្រើសរើសពីម៉ាស៊ីនមេនៅប្រភពដើមផ្សេងគ្នា។ នេះគឺជាការវិវឌ្ឍដ៏សំខាន់មួយនៅក្នុងសុវត្ថិភាពគេហទំព័រ ព្រោះវាអនុញ្ញាតឱ្យមានការទំនាក់ទំនងបើកចំហបន្ថែមទៀតរវាងសេវាកម្មគេហទំព័រផ្សេងៗគ្នា ខណៈពេលដែលនៅតែការពារប្រឆាំងនឹងការវាយប្រហារព្យាបាទ។

របៀបដែល CORS បង្កើនសុវត្ថិភាពគេហទំព័រ៖ ការយល់ដឹងផ្នែកបច្ចេកទេស

CORS គឺជាមុខងារសុវត្ថិភាពដែលអនុញ្ញាតឱ្យកម្មវិធីគេហទំព័រធ្វើសំណើទៅកាន់ម៉ាស៊ីនមេដែលមានប្រភពផ្សេងៗគ្នាជាងគេហទំព័រ។

មុនពេល CORS គោលការណ៍ដើមដូចគ្នាបានដាក់កម្រិតកម្មវិធីគេហទំព័រដើម្បីធ្វើសំណើតែចំពោះដែនដូចគ្នាជាមួយគេហទំព័រ។ ខណៈពេលដែលគោលការណ៍នេះគឺជាវិធានការសុវត្ថិភាពដ៏សំខាន់ រារាំងគេហទំព័រព្យាបាទពីការចូលប្រើទិន្នន័យរសើប វាក៏កំណត់អន្តរកម្មឆ្លងប្រភពដើមស្របច្បាប់ដែលចាំបាច់សម្រាប់កម្មវិធីបណ្ដាញទំនើបផងដែរ។

CORS អនុញ្ញាតឱ្យម៉ាស៊ីនមេរួមបញ្ចូលបឋមកថាជាក់លាក់ដែលប្រាប់កម្មវិធីរុករកដែលប្រភពដើមត្រូវបានអនុញ្ញាតឱ្យចូលប្រើធនធាន។ នេះជាឧទាហរណ៍ជាមូលដ្ឋាននៃរបៀបដែល CORS បង្កើនសុវត្ថិភាព៖

កម្មវិធីបណ្តាញនៅ https://example.com ព្យាយាមធ្វើសំណើទៅ https://api.example.org/data.
កម្មវិធីរុករកតាមអ៊ីនធឺណិតផ្ញើសំណើ CORS ដោយស្វ័យប្រវត្តិទៅ https://api.example.org/data.
ម៉ាស៊ីនមេនៅ https://api.example.org ពិនិត្យគោលការណ៍ CORS របស់ខ្លួនដើម្បីកំណត់ថាតើ https://example.com ត្រូវបានអនុញ្ញាត។
ប្រសិនបើ https://example.com ត្រូវបានអនុញ្ញាត ម៉ាស៊ីនមេឆ្លើយតបជាមួយនឹងបឋមកថា CORS ដែលសមស្រប ដូចជា Access-Control-Allow-Origin: https://example.comដោយបង្ហាញថាកម្មវិធីរុករកគួរតែអនុញ្ញាតឱ្យកម្មវិធីគេហទំព័រចូលប្រើធនធាន។

បើគ្មាន CORS ទេ គោលការណ៍ដើមដូចគ្នានឹងរារាំងសំណើ ប៉ុន្តែជាមួយ CORS ម៉ាស៊ីនមេអាចអនុញ្ញាតឱ្យមានការស្នើសុំប្រភពឆ្លងពីប្រភពដើមដែលអាចទុកចិត្តបាន។

សំណើសាមញ្ញធៀបនឹង Preflight៖ ការយល់ដឹងពីភាពខុសគ្នា

សំណើរបស់ CORS ត្រូវបានបែងចែកជាពីរប្រភេទ៖ សំណើសាមញ្ញ និងសំណើដែលបានហោះហើរជាមុន។ ភាពខុសគ្នារវាងពួកវាគឺផ្អែកលើវិធីសាស្ត្រដែលបានប្រើ និងបឋមកថាដែលបានផ្ញើជាមួយសំណើ។

សំណើសាមញ្ញ៖ ទាំងនេះគឺជាសំណើដែលបំពេញតាមលក្ខណៈវិនិច្ឆ័យជាក់លាក់ដែលកំណត់ដោយ CORS ។ សំណើសាមញ្ញអាចប្រើវិធីសាស្ត្រ GET, POST ឬ HEAD ។ លើសពីនេះទៅទៀត វាត្រូវតែប្រើតែបឋមកថាដែលត្រូវបានចាត់ទុកថាមានសុវត្ថិភាព និងមិនមែនជាអ្នកប្រើដែលកំណត់ដូចជា Accept, Accept-Language, Content-Language, និង Content-Type ជាមួយនឹងតម្លៃនៃ application/x-www-form-urlencoded, multipart/form-data, ឬ text/plain. នេះជាឧទាហរណ៍នៃសំណើសាមញ្ញមួយ៖

fetch('https://api.example.org/data', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
  }
});

សំណើដែលបានធ្វើទុកជាមុន៖ សំណើទាំងនេះមិនបំពេញតាមលក្ខណៈវិនិច្ឆ័យសម្រាប់សំណើសាមញ្ញទេ ហើយទាមទារសំណើ "preflight" ដំបូងជាមួយវិធីសាស្ត្រ OPTIONS មុនពេលសំណើពិតប្រាកដត្រូវបានផ្ញើ។ ការហោះហើរជាមុននេះពិនិត្យមើលថាតើសំណើពិតប្រាកដមានសុវត្ថិភាពក្នុងការផ្ញើ ដោយផ្អែកលើគោលការណ៍ CORS នៃធនធានគោលដៅ។ សំណើដែលបានប្រើមុនត្រូវបានប្រើនៅពេលដែលវិធីសាស្ត្រគឺក្រៅពី GET, POST ឬ HEAD ឬពេលដែលបឋមកថាផ្ទាល់ខ្លួនត្រូវបានប្រើ។ នេះជាឧទាហរណ៍៖

fetch('https://api.example.org/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  },
  body: JSON.stringify({key: 'value'})
});

ក្នុងករណីនេះ កម្មវិធីរុករកដំបូងផ្ញើសំណើ OPTIONS ទៅ https://api.example.org/data ដើម្បីកំណត់ថាតើសំណើ POST ជាមួយ a Content-Type នៃ application/json និងបឋមកថាផ្ទាល់ខ្លួន X-Custom-Header ត្រូវបានអនុញ្ញាត។

បឋមកថា CORS បានពន្យល់៖ តើពួកគេជាអ្វី និងរបៀបដែលពួកគេធ្វើការ

CORS ពឹងផ្អែកលើបឋមកថា HTTP ជាក់លាក់ដើម្បីទំនាក់ទំនងរវាងម៉ាស៊ីនមេ និងកម្មវិធីរុករក។ បឋមកថាទាំងនេះកំណត់ថាតើកម្មវិធីរុករកគួរតែរារាំង ឬអនុញ្ញាតឱ្យសំណើបន្ត។ នេះគឺជាបឋមកថា CORS សំខាន់ៗ៖

Access-Control-Allow-Origin៖ បឋមកថានេះបញ្ជាក់ប្រភពដើម(s) ដែលត្រូវបានអនុញ្ញាតឱ្យចូលប្រើធនធាន។ វាអាចត្រូវបានកំណត់ទៅប្រភពដើមជាក់លាក់មួយដូចជា https://example.com, ឬ * ដើម្បីអនុញ្ញាតឱ្យមានប្រភពដើមទាំងអស់ (ទោះបីជាប្រើ * ជាមួយនឹងលិខិតសម្គាល់មិនត្រូវបានអនុញ្ញាត) ។
Access-Control-Allow-Methods៖ បឋមកថានេះត្រូវបានប្រើក្នុងការឆ្លើយតបទៅនឹងសំណើ preflight ដើម្បីបង្ហាញថាវិធី HTTP មួយណាត្រូវបានអនុញ្ញាតពេលចូលប្រើប្រាស់ធនធាន។
Access-Control-Allow-Headers៖ ជាការឆ្លើយតបទៅនឹងសំណើ preflight បឋមកថានេះបញ្ជាក់ថាតើបឋមកថាមួយណាអាចត្រូវបានប្រើនៅក្នុងសំណើពិតប្រាកដ។
Access-Control-Expose-Headers៖ បឋមកថានេះអនុញ្ញាតឱ្យម៉ាស៊ីនមេដាក់បញ្ជីស បឋមកថា ដែលកម្មវិធីរុករកត្រូវបានអនុញ្ញាតឱ្យចូលប្រើ។
Access-Control-Allow-Credentials៖ បឋមកថានេះបង្ហាញថាតើការឆ្លើយតបទៅនឹងសំណើអាចត្រូវបានលាតត្រដាងនៅពេលដែលទង់អត្តសញ្ញាណពិតឬអត់។ វាត្រូវតែត្រូវបានកំណត់ទៅ true ប្រសិនបើខូគី ឬការផ្ទៀងផ្ទាត់ព័ត៌មានលម្អិតពាក់ព័ន្ធនឹងសំណើ។
Access-Control-Max-Age៖ បឋមកថានេះបង្ហាញពីរយៈពេលដែលលទ្ធផលនៃការស្នើសុំមុនអាចត្រូវបានទុកក្នុងឃ្លាំងសម្ងាត់។

ការយល់ដឹង និងអនុវត្តឱ្យបានត្រឹមត្រូវនូវបឋមកថា CORS គឺចាំបាច់សម្រាប់ការធានាកម្មវិធីគេហទំព័រ ខណៈពេលដែលអនុញ្ញាតឱ្យមានសំណើឆ្លងប្រភពចាំបាច់។ តាមរយៈការកំណត់បឋមកថាទាំងនេះ អ្នកអភិវឌ្ឍន៍អាចកែសម្រួលសំណើដែលមានប្រភពឆ្លងដែនត្រូវបានអនុញ្ញាត ដោយធានាថាមានតែប្រភពដែលគួរឱ្យទុកចិត្តប៉ុណ្ណោះដែលអាចចូលប្រើធនធានគេហទំព័ររបស់ពួកគេ។

ការអនុវត្ត CORS

ការអនុវត្តការចែករំលែកធនធានឆ្លងប្រភពដើម (CORS) គឺចាំបាច់សម្រាប់កម្មវិធីបណ្ដាញទំនើបដែលមានអន្តរកម្មជាមួយធនធាននៅទូទាំងប្រភពដើមផ្សេងៗគ្នា។ ផ្នែកនេះស្វែងយល់ពីរបៀបបើក CORS នៅក្នុងកម្មវិធីរបស់អ្នក បំបាត់កំហុស CORS ទូទៅ និងរៀបរាប់ពីការអនុវត្តល្អបំផុតសម្រាប់អ្នកអភិវឌ្ឍន៍គេហទំព័រ។

ការបើកដំណើរការ CORS នៅក្នុងកម្មវិធីរបស់អ្នក៖ ការណែនាំជាជំហានៗ

ការបើក CORS ពាក់ព័ន្ធនឹងការកំណត់រចនាសម្ព័ន្ធម៉ាស៊ីនមេរបស់អ្នកដើម្បីផ្ញើបឋមកថា CORS ដែលសមស្របក្នុងការឆ្លើយតបទៅនឹងសំណើ។ ដំណើរការនេះប្រែប្រួលអាស្រ័យលើបច្ចេកវិទ្យាម៉ាស៊ីនមេ (ឧ. Apache, Nginx, Node.js) ដែលអ្នកកំពុងប្រើ។ នេះជារបៀបបើក CORS លើបរិស្ថានម៉ាស៊ីនមេផ្សេងៗគ្នា៖

Apache៖ សម្រាប់ម៉ាស៊ីនមេ Apache អ្នកអាចបើក CORS ដោយបន្ថែមការណែនាំខាងក្រោមទៅកាន់របស់អ្នក។ .htaccess ឯកសារឬឯកសារកំណត់រចនាសម្ព័ន្ធម៉ាស៊ីនមេ៖

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Headers "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
</IfModule>

ការកំណត់រចនាសម្ព័ន្ធនេះអនុញ្ញាតឱ្យមានប្រភពដើមទាំងអស់ (*) ដើម្បីធ្វើសំណើដោយប្រើវិធីសាស្ត្រ និងបឋមកថាដែលបានបញ្ជាក់។ លៃតម្រូវ Access-Control-Allow-Origin តម្លៃដើម្បីដាក់កម្រិតការចូលដំណើរការទៅកាន់ប្រភពដែលទុកចិត្ត។

Nginx៖ នៅក្នុង Nginx CORS អាចត្រូវបានបើកដោយបន្ថែមដូចខាងក្រោមទៅប្លុកម៉ាស៊ីនមេរបស់អ្នក៖

location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With';
        add_header 'Content-Length' '0';
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With';
}

Node.js (Express)៖ សម្រាប់កម្មវិធី Node.js ដោយប្រើ Express, CORS អាចត្រូវបានបើកយ៉ាងងាយស្រួលដោយប្រើ cors ឧបករណ៍កណ្តាល៖

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
    origin: '*', // Adjust this to your specific origin
    methods: ['GET', 'POST', 'OPTIONS', 'DELETE', 'PUT'],
    allowedHeaders: ['Content-Type', 'Access-Control-Allow-Headers', 'Authorization', 'X-Requested-With'],
}));

app.get('/data', (req, res) => {
    res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

ការបំបាត់កំហុស CORS ទូទៅ៖ គន្លឹះ និងល្បិច

កំហុស CORS ជាធម្មតាកើតឡើងនៅពេលដែលកម្មវិធីរុករករារាំងសំណើដោយសារគោលការណ៍ CORS របស់ម៉ាស៊ីនមេ។ កំហុសទូទៅរួមមានសារអំពីការបាត់ Access-Control-Allow-Origin បឋមកថា ឬវិធីសាស្រ្តមិនត្រូវបានអនុញ្ញាត។ ដើម្បីបំបាត់កំហុសទាំងនេះ៖

ប្រើកម្មវិធីរុករក DevTools៖ កម្មវិធីរុករកតាមអ៊ីនធឺណិតទំនើបផ្តល់នូវសារកំហុសលម្អិតនៅក្នុងកុងសូល។ សារទាំងនេះជារឿយៗបង្ហាញពីអ្វីដែលបាត់ ឬកំណត់រចនាសម្ព័ន្ធមិនត្រឹមត្រូវ។
ពិនិត្យការកំណត់រចនាសម្ព័ន្ធម៉ាស៊ីនមេ៖ ត្រូវប្រាកដថាម៉ាស៊ីនមេរបស់អ្នកត្រូវបានកំណត់យ៉ាងត្រឹមត្រូវដើម្បីផ្ញើបឋមកថា CORS ចាំបាច់។ បាត់បឋមកថា ឬតម្លៃមិនត្រឹមត្រូវ គឺជាបញ្ហាទូទៅ។
សាកល្បងជាមួយឧបករណ៍៖ ឧបករណ៍ដូចជា Postman ឬ cURL អាចក្លែងធ្វើសំណើពីប្រភពដើមផ្សេងៗគ្នា និងជួយកំណត់ថាតើម៉ាស៊ីនមេឆ្លើយតបជាមួយនឹងបឋមកថា CORS ត្រឹមត្រូវ។
ពិនិត្យមើលគោលការណ៍ CORS៖ ត្រូវប្រាកដថាគោលការណ៍ CORS របស់អ្នកនៅលើម៉ាស៊ីនមេត្រូវគ្នានឹងតម្រូវការនៃកម្មវិធីគេហទំព័ររបស់អ្នក។ ឧទាហរណ៍ ប្រសិនបើកម្មវិធីរបស់អ្នកត្រូវការផ្ញើលិខិតសម្គាល់ (ខូគី ការផ្ទៀងផ្ទាត់ HTTP) សូមធានា Access-Control-Allow-Credentials ត្រូវបានកំណត់ទៅ true និង Access-Control-Allow-Origin មិនត្រូវបានកំណត់ទៅ *.

ការអនុវត្តល្អបំផុតនៃការកំណត់រចនាសម្ព័ន្ធ CORS សម្រាប់អ្នកអភិវឌ្ឍន៍គេហទំព័រ

ការអនុវត្ត CORS ប្រកបដោយសុវត្ថិភាព និងប្រកបដោយប្រសិទ្ធភាព ទាមទារការប្រកាន់ខ្ជាប់នូវការអនុវត្តល្អបំផុត៖

បញ្ជាក់ប្រភពដើមពិតប្រាកដ៖ ជំនួសឱ្យការប្រើប្រាស់ * សម្រាប់ Access-Control-Allow-Originបញ្ជាក់ប្រភពដើមពិតប្រាកដដែលគួរតែត្រូវបានអនុញ្ញាតឱ្យចូលប្រើធនធានរបស់អ្នក។ នេះកំណត់ការប៉ះពាល់ទៅនឹងសំណើឆ្លងប្រភពដែលមិនចង់បាន។
ប្រើលិខិតសម្គាល់ដោយប្រុងប្រយ័ត្ន៖ ប្រសិនបើកម្មវិធីរបស់អ្នកប្រើព័ត៌មានបញ្ជាក់អត្តសញ្ញាណ សូមធានា Access-Control-Allow-Credentials ត្រូវបានកំណត់ទៅ trueនិងបញ្ជាក់ប្រភពដើមពិតប្រាកដជំនួសឱ្យ *. សូមចងចាំថាលិខិតសម្គាល់រួមមានខូគី ការផ្ទៀងផ្ទាត់ HTTP និងវិញ្ញាបនបត្រ SSL ខាងអតិថិជន។
កំណត់បឋមកថាបង្ហាញ៖ បង្ហាញតែបឋមកថាចាំបាច់តាមរយៈ Access-Control-Expose-Headers. ការបង្ហាញបឋមកថាច្រើនពេកអាចលេចធ្លាយព័ត៌មានរសើបដោយអចេតនា។
ធ្វើឱ្យមានសុពលភាពរយៈពេលឃ្លាំងសម្ងាត់ Preflight៖ ប្រើ Access-Control-Max-Age ដើម្បីរក្សាទុកការឆ្លើយតប preflight កាត់បន្ថយចំនួនសំណើ preflight ។ ទោះជាយ៉ាងណាក៏ដោយ សូមប្រាកដថារយៈពេលត្រូវគ្នានឹងភាពញឹកញាប់នៃគោលការណ៍ CORS របស់អ្នកអាចនឹងផ្លាស់ប្តូរ។
អនុវត្តគោលនយោបាយ CORS ថាមវន្ត៖ សម្រាប់កម្មវិធីស្មុគ្រស្មាញជាងនេះ សូមពិចារណាអនុវត្តគោលនយោបាយ CORS ថាមវន្តដែលកែតម្រូវ Access-Control-Allow-Origin ផ្អែកលើប្រភពដើមនៃសំណើ។ នេះអាចត្រូវបានធ្វើតាមកម្មវិធីនៅលើម៉ាស៊ីនមេ។
ពិនិត្យមើលគោលការណ៍ CORS ជាទៀងទាត់៖ នៅពេលដែលកម្មវិធីគេហទំព័ររបស់អ្នកមានការវិវឌ្ឍ សូមពិនិត្យមើលឱ្យបានទៀងទាត់ និងធ្វើបច្ចុប្បន្នភាពគោលការណ៍ CORS របស់អ្នក ដើម្បីធានាថាវានៅតែបំពេញតាមតម្រូវការសុវត្ថិភាព និងមុខងាររបស់អ្នក។

ដោយធ្វើតាមគោលការណ៍ណែនាំទាំងនេះ និងស្វែងយល់ពីរបៀបកំណត់រចនាសម្ព័ន្ធ និងបំបាត់កំហុស CORS អ្នកអភិវឌ្ឍន៍អាចធានាបានថាកម្មវិធីបណ្ដាញរបស់ពួកគេមានសុវត្ថិភាព និងមានប្រសិទ្ធភាពក្នុងការទំនាក់ទំនងតាមប្រភពដើម។

CORS នៅក្នុងសកម្មភាព

ការអនុវត្តការចែករំលែកធនធានឆ្លងប្រភពដើម (CORS) មិនមែនគ្រាន់តែអំពីការបើកមុខងារមួយប៉ុណ្ណោះទេ។ វានិយាយអំពីការយល់ដឹងពីរបៀបដែលវាដំណើរការនៅក្នុងបរិបទនៃកម្មវិធីបណ្តាញទំនើប។ ផ្នែកនេះស្វែងយល់អំពីឧទាហរណ៍ជាក់ស្តែងនៃ CORS ការគ្រប់គ្រងគោលនយោបាយ CORS និងឧបករណ៍ និងបច្ចេកទេសសម្រាប់ការអនុវត្តប្រកបដោយប្រសិទ្ធភាព។

គំរូពិភពលោកពិតនៃ CORS៖ ពីទ្រឹស្តីទៅការអនុវត្ត

CORS គឺជាផ្នែកមូលដ្ឋាននៃការអភិវឌ្ឍន៍គេហទំព័រដែលអនុញ្ញាតឱ្យធនធានត្រូវបានស្នើសុំដោយសុវត្ថិភាពនៅទូទាំងប្រភពដើមផ្សេងៗគ្នា។ នេះគឺជាសេណារីយ៉ូក្នុងពិភពពិតមួយចំនួនដែល CORS ដើរតួនាទីយ៉ាងសំខាន់៖

ការប្រើប្រាស់ API នៅក្នុងកម្មវិធីទំព័រតែមួយ (SPAs)៖ SPAs តែងតែប្រើប្រាស់ APIs ដែលត្រូវបានបង្ហោះនៅលើដែនផ្សេងៗគ្នា។ ឧទាហរណ៍ កម្មវិធី React បម្រើពី https://myapp.com ប្រហែលជាត្រូវការទាញយកទិន្នន័យអ្នកប្រើប្រាស់ពី https://api.userdata.com. បើគ្មាន CORS សំណើឆ្លងប្រភពនេះនឹងត្រូវបានរារាំងដោយកម្មវិធីរុករកតាមអ៊ីនធឺណិត។ ដោយកំណត់បឋមកថា CORS សមស្រប (Access-Control-Allow-Origin: https://myapp.com) នៅលើម៉ាស៊ីនមេ API SPA អាចស្នើសុំទិន្នន័យដែលត្រូវការដោយសុវត្ថិភាព។

// Example fetch request in an SPA
fetch("https://api.userdata.com/user", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching user data:', error));

បណ្តាញចែកចាយមាតិកា (CDNs)៖ CDNs បម្រើទ្រព្យសកម្មឋិតិវន្ត (រូបភាព ស្គ្រីប សន្លឹករចនាប័ទ្ម) ពីទីតាំងផ្សេងៗជុំវិញពិភពលោក។ នៅពេលដែលកម្មវិធីគេហទំព័ររបស់អ្នកបង្ហោះនៅ https://example.com ស្នើសុំរូបភាពពី https://cdn.example.com, CORS ធានាថាសំណើឆ្លងប្រភពទាំងនេះសម្រាប់ទ្រព្យសកម្មឋិតិវន្តត្រូវបានដោះស្រាយដោយសុវត្ថិភាព។
ធាតុក្រាហ្វិកភាគីទីបី និងការរួមបញ្ចូល៖ គេហទំព័រជាញឹកញាប់រួមបញ្ចូលធាតុក្រាហ្វិកភាគីទីបី (ឧ. chatbots, social media feeds) ដែលទាមទារឱ្យមានការចូលប្រើធនធានពី servers ខាងក្រៅ។ CORS អនុញ្ញាតឱ្យធាតុក្រាហ្វិកទាំងនេះដំណើរការយ៉ាងរលូននៅទូទាំងប្រភពដើមផ្សេងៗគ្នា បង្កើនបទពិសោធន៍អ្នកប្រើប្រាស់ដោយមិនប៉ះពាល់ដល់សុវត្ថិភាព។

ការគ្រប់គ្រងគោលនយោបាយ CORS៖ ឧបករណ៍ និងបច្ចេកទេសសម្រាប់ការអនុវត្តប្រកបដោយប្រសិទ្ធភាព

ការគ្រប់គ្រងគោលនយោបាយ CORS ប្រកបដោយប្រសិទ្ធភាព ទាមទារការយល់ដឹងអំពីឧបករណ៍ និងបច្ចេកទេសក្នុងការចោលរបស់អ្នក៖

ការកំណត់រចនាសម្ព័ន្ធម៉ាស៊ីនមេ៖ ជំហានដំបូងក្នុងការគ្រប់គ្រងគោលការណ៍ CORS គឺកំណត់រចនាសម្ព័ន្ធម៉ាស៊ីនមេគេហទំព័ររបស់អ្នក។ វាពាក់ព័ន្ធនឹងការកំណត់បឋមកថា CORS ចាំបាច់ដោយផ្អែកលើតម្រូវការកម្មវិធីរបស់អ្នក។ ម៉ាស៊ីនមេគេហទំព័រភាគច្រើន (Apache, Nginx, IIS) អនុញ្ញាតឱ្យអ្នកបញ្ជាក់បឋមកថាទាំងនេះនៅក្នុងឯកសារកំណត់រចនាសម្ព័ន្ធរបស់ពួកគេ ឬតាមរយៈ .htaccess (សម្រាប់ Apache) ។
Middleware សម្រាប់ Web Frameworks៖ ប្រសិនបើអ្នកកំពុងប្រើក្របខ័ណ្ឌបណ្ដាញ (Express.js សម្រាប់ Node.js, Django សម្រាប់ Python) មនុស្សជាច្រើនផ្តល់ជូននូវកញ្ចប់ឧបករណ៍កណ្តាលដែលសម្រួលការគ្រប់គ្រងគោលនយោបាយ CORS ។ ឧ cors កញ្ចប់សម្រាប់ Express អនុញ្ញាតឱ្យអ្នកកំណត់គោលការណ៍ CORS ដោយផ្ទាល់នៅក្នុងកូដកម្មវិធីរបស់អ្នក។

// Example using the cors middleware in an Express.js application
const cors = require('cors');
const express = require('express');
const app = express();

// Define CORS options
const corsOptions = {
  origin: 'https://example.com',
  optionsSuccessStatus: 200,
};

app.use(cors(corsOptions));

app.get('/data', (req, res) => {
  res.json({ message: 'CORS-enabled route' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

ការគ្រប់គ្រង CORS ថាមវន្ត៖ សម្រាប់កម្មវិធីដែលត្រូវអនុញ្ញាតសំណើពីប្រភពដែលអាចទុកចិត្តបានច្រើន ការគ្រប់គ្រង CORS ថាមវន្តអាចត្រូវបានអនុវត្ត។ នេះពាក់ព័ន្ធនឹងការកំណត់កម្មវិធី Access-Control-Allow-Origin បឋមកថាដោយផ្អែកលើប្រភពដើមនៃសំណើចូល។

// Example of dynamic CORS handling
app.use((req, res, next) => {
  const allowedOrigins = ['https://example.com', 'https://api.example.com'];
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  next();
});

ឧបករណ៍សម្រាប់សាកល្បង និងបំបាត់កំហុសគោលការណ៍ CORS

ឧបករណ៍អ្នកអភិវឌ្ឍន៍កម្មវិធីរុករក៖ ផ្ទាំងបណ្តាញនៅក្នុងឧបករណ៍អ្នកអភិវឌ្ឍន៍កម្មវិធីរុករកគឺមានតម្លៃមិនអាចកាត់ថ្លៃបានសម្រាប់ការត្រួតពិនិត្យកំហុស CORS និងការយល់ដឹងពីរបៀបដែលបឋមកថា CORS ត្រូវបានផ្ញើ និងទទួលក្នុងពេលជាក់ស្តែង។
ឧបករណ៍អនឡាញ៖ ឧបករណ៍ដូចជា អ្នកសាកល្បង CORS និង អ្នកប្រៃសណីយ៍ អនុញ្ញាតឱ្យអ្នកសាកល្បងគោលការណ៍ CORS ដោយផ្ញើសំណើទៅកាន់ម៉ាស៊ីនមេរបស់អ្នកពីប្រភពដើមផ្សេងៗគ្នា និងពិនិត្យមើលការឆ្លើយតប។
ឧបករណ៍បន្ទាត់ពាក្យបញ្ជា: curl គឺជាឧបករណ៍ដ៏មានឥទ្ធិពលសម្រាប់សាកល្បងគោលការណ៍ CORS ពីបន្ទាត់ពាក្យបញ្ជា។ វាអាចត្រូវបានប្រើដើម្បីក្លែងធ្វើសំណើពីប្រភពដើមផ្សេងៗគ្នា និងពិនិត្យបឋមកថា CORS នៅក្នុងការឆ្លើយតបរបស់ម៉ាស៊ីនមេ។

# Example curl command to test CORS
curl -H "Origin: https://example.com" \
     -I https://api.example.com/data

តាមរយៈការយល់ដឹងអំពីកម្មវិធី និងយុទ្ធសាស្ត្រគ្រប់គ្រងក្នុងពិភពពិតទាំងនេះ អ្នកអភិវឌ្ឍន៍អាចធានាបានថាកម្មវិធីគេហទំព័ររបស់ពួកគេមានអន្តរកម្មប្រកបដោយសុវត្ថិភាពជាមួយនឹងធនធាននានានៅទូទាំងប្រភពដើម ដោយប្រើប្រាស់ CORS ដល់សក្តានុពលពេញលេញរបស់វា។

ថាតើវាកំពុងបើកសំណើ API ឆ្លងប្រភពដើមនៅក្នុង SPAs ការបម្រើទ្រព្យសកម្មតាមរយៈ CDNs ឬរួមបញ្ចូលធាតុក្រាហ្វិកភាគីទីបី CORS គឺជាផ្នែកសំខាន់នៃប្រព័ន្ធអេកូបណ្ដាញទំនើបដែលនៅពេលគ្រប់គ្រងបានត្រឹមត្រូវ ផ្តល់ទាំងសុវត្ថិភាព និងមុខងារ។

ផលប៉ះពាល់សុវត្ថិភាពនៃ CORS

ការអនុវត្តការចែករំលែកធនធានឆ្លងប្រភពដើម (CORS) មានផលប៉ះពាល់សុវត្ថិភាពយ៉ាងខ្លាំងសម្រាប់កម្មវិធីបណ្ដាញ។ ខណៈពេលដែល CORS អនុញ្ញាតឱ្យកម្មវិធីបណ្តាញដើម្បីស្នើសុំធនធានពីប្រភពដើមផ្សេងៗគ្នា វាក៏ណែនាំពីភាពងាយរងគ្រោះដែលអាចកើតមានផងដែរ ប្រសិនបើមិនបានកំណត់រចនាសម្ព័ន្ធត្រឹមត្រូវ។

ផ្នែកនេះពិចារណាលើទិដ្ឋភាពសុវត្ថិភាពនៃ CORS ដោយរំលេចលើការកាត់បន្ថយការវាយប្រហារឆ្លងគេហទំព័រ (XSS) និងសារៈសំខាន់នៃគោលនយោបាយ CORS ដ៏តឹងរឹង។

CORS និងសុវត្ថិភាពគេហទំព័រ៖ កាត់បន្ថយការវាយប្រហារឆ្លងគេហទំព័រ (XSS)

ការវាយប្រហារតាមស្គ្រីបឆ្លងគេហទំព័រ (XSS) អនុញ្ញាតឱ្យអ្នកវាយប្រហារបញ្ចូលស្គ្រីបព្យាបាទទៅក្នុងខ្លឹមសារពីគេហទំព័រមិនសមរម្យ និងគួរឱ្យទុកចិត្ត។

ការវាយប្រហារទាំងនេះកើតឡើងនៅពេលដែលកម្មវិធីរួមបញ្ចូលទិន្នន័យដែលមិនគួរឱ្យទុកចិត្តនៅក្នុងទំព័របណ្តាញដោយមិនមានសុពលភាពត្រឹមត្រូវ ឬគេចចេញ ដែលអនុញ្ញាតឱ្យអ្នកវាយប្រហារដំណើរការស្គ្រីបនៅក្នុងបរិបទកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់ជនរងគ្រោះ។ CORS មានសារៈសំខាន់ក្នុងការកាត់បន្ថយការវាយប្រហារ XSS ដោយការគ្រប់គ្រងប្រភពដើមដែលត្រូវបានអនុញ្ញាតឱ្យធ្វើអន្តរកម្មជាមួយកម្មវិធីគេហទំព័ររបស់អ្នក។

ពិចារណាលើសេណារីយ៉ូដែលកម្មវិធីអនុញ្ញាតមាតិកាដែលបង្កើតដោយអ្នកប្រើប្រាស់ដែលអាចរួមបញ្ចូលស្គ្រីបព្យាបាទ។

ប្រសិនបើគ្មានអនាម័យខ្លឹមសារត្រឹមត្រូវ និងគោលការណ៍ CORS ដ៏តឹងរឹង កម្មវិធីនេះអាចក្លាយជាវ៉ិចទ័រសម្រាប់ការវាយប្រហារ XSS ។ CORS មិនរារាំង XSS ដោយផ្ទាល់ទេ ប៉ុន្តែរួមចំណែកដល់យុទ្ធសាស្ត្រសុវត្ថិភាពកាន់តែទូលំទូលាយ ដោយធានាថាមានតែប្រភពដើមដែលបានបញ្ជាក់ប៉ុណ្ណោះដែលអាចធ្វើការស្នើសុំទៅកាន់កម្មវិធីរបស់អ្នក ដោយកាត់បន្ថយផ្ទៃនៃការវាយប្រហារ។

ឧទាហរណ៍ ឧបមាថាកម្មវិធីរបស់អ្នក។ https://safe-app.com ប្រើ API ដែលបង្ហោះនៅ https://api.safe-app.com. ដោយការកំណត់ Access-Control-Allow-Origin ក្បាលទៅ https://safe-app.comអ្នកធានាថាមានតែសំណើដែលមានប្រភពចេញពីកម្មវិធីរបស់អ្នកប៉ុណ្ណោះដែលអាចចូលប្រើ API បាន។ ការដាក់កម្រិតនេះជួយកាត់បន្ថយការវាយប្រហារ XSS ដែលអាចកើតមានដោយកំណត់អន្តរកម្មជាមួយ API របស់អ្នកចំពោះប្រភពដើមដែលអាចទុកចិត្តបាន។

Access-Control-Allow-Origin: https://safe-app.com

ទោះជាយ៉ាងណាក៏ដោយ វាមានសារៈសំខាន់ណាស់ក្នុងការរួមបញ្ចូលគ្នានូវគោលការណ៍ CORS ជាមួយនឹងការអនុវត្តន៍សុវត្ថិភាពផ្សេងទៀត ដូចជាការធ្វើឱ្យមានសុពលភាព និងអនាម័យការបញ្ចូលរបស់អ្នកប្រើប្រាស់ ដើម្បីកាត់បន្ថយ XSS និងប្រភេទនៃការវាយប្រហារផ្សេងទៀតប្រកបដោយប្រសិទ្ធភាព។

សារៈសំខាន់នៃគោលនយោបាយ CORS ដ៏តឹងរឹង៖ ការការពារកម្មវិធីគេហទំព័ររបស់អ្នក។

ការអនុវត្តគោលនយោបាយ CORS ដ៏តឹងរឹងគឺមានសារៈសំខាន់សម្រាប់ការពារកម្មវិធីគេហទំព័ររបស់អ្នកពីការគំរាមកំហែងផ្នែកសុវត្ថិភាពផ្សេងៗ។ គោលនយោបាយ CORS ដ៏ធូររលុង ដូចជាការកំណត់ Access-Control-Allow-Origin ទៅ *អាចបង្ហាញកម្មវិធីរបស់អ្នកទៅនឹងការលួចទិន្នន័យ ការវាយប្រហារ CSRF និងភាពងាយរងគ្រោះផ្សេងទៀតដោយអនុញ្ញាតឱ្យប្រភពដើមណាមួយធ្វើសំណើទៅកាន់ម៉ាស៊ីនមេរបស់អ្នក។

គោលនយោបាយ CORS ដ៏តឹងរ៉ឹងបញ្ជាក់ប្រភពដើម វិធីសាស្រ្ត និងបឋមកថាត្រូវបានអនុញ្ញាត។ ភាពជាក់លាក់នេះធានាថាមានតែកម្មវិធីគេហទំព័រដែលជឿទុកចិត្តប៉ុណ្ណោះដែលអាចធ្វើអន្តរកម្មជាមួយធនធានរបស់អ្នក ដោយផ្តល់នូវស្រទាប់សុវត្ថិភាពដែលជួយការពារទិន្នន័យរសើប និងភាពត្រឹមត្រូវនៃកម្មវិធី។

ជាឧទាហរណ៍ សូមពិចារណាកម្មវិធីដែលអនុញ្ញាតឱ្យចូលប្រើពីដែនជាក់លាក់មួយ និងប្រើប្រាស់ព័ត៌មានសម្គាល់អត្តសញ្ញាណ (ខូគី ការផ្ទៀងផ្ទាត់ HTTP)៖

Access-Control-Allow-Origin: https://trusted-domain.com
Access-Control-Allow-Credentials: true

ការកំណត់រចនាសម្ព័ន្ធនេះអនុញ្ញាត https://trusted-domain.com ដើម្បីធ្វើសំណើដោយមានលិខិតសម្គាល់ចំពោះពាក្យសុំរបស់អ្នក ខណៈពេលដែលសំណើពីប្រភពដើមផ្សេងទៀតត្រូវបានបដិសេធ។ ការដាក់កម្រិតនេះគឺមានសារៈសំខាន់សម្រាប់កម្មវិធីដែលគ្រប់គ្រងព័ត៌មានរសើប ឬធ្វើសកម្មភាពជំនួសអ្នកប្រើប្រាស់។

លើសពីនេះទៅទៀត ការបញ្ជាក់អំពីវិធីសាស្ត្រដែលបានអនុញ្ញាត និងបឋមកថារឹតតែរឹតបន្តឹងសុវត្ថិភាព៖

Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, X-Custom-Header

ការរៀបចំនេះធានាថាមានតែសំណើ GET និង POST ដែលមានបឋមកថាដែលបានបញ្ជាក់ប៉ុណ្ណោះដែលត្រូវបានទទួលយក ដោយកាត់បន្ថយហានិភ័យនៃសំណើដែលមិនមានការអនុញ្ញាត ឬព្យាបាទ។

ការអនុវត្តល្អបំផុតសម្រាប់ការអនុវត្ត CORS ប្រកបដោយសុវត្ថិភាព

បញ្ជាក់ប្រភពដើមដែលបានអនុញ្ញាត៖ តែងតែកំណត់ប្រភពដើមជាក់លាក់ ជាជាងប្រើអក្សរជំនួស *. ការអនុវត្តនេះធានាថាមានតែដែនដែលអាចទុកចិត្តបានប៉ុណ្ណោះដែលអាចធ្វើការស្នើសុំទៅកាន់កម្មវិធីរបស់អ្នក។
កំណត់ការចូលប្រើជាមួយព័ត៌មានសម្ងាត់៖ សូមប្រយ័ត្នពេលអនុញ្ញាតិឱ្យចេញលិខិតសម្គាល់។ ធានាថា Access-Control-Allow-Credentials ត្រូវបានកំណត់ទៅ true លុះត្រាតែចាំបាច់ ហើយប្រភពដើមត្រូវបានកំណត់យ៉ាងច្បាស់លាស់។
កំណត់វិធីសាស្រ្តដែលបានអនុញ្ញាត និងបឋមកថា៖ បញ្ជាក់វិធីសាស្រ្ត និងបឋមកថាណាដែលត្រូវបានអនុញ្ញាត។ ការរឹតបន្តឹងនេះមិនត្រឹមតែរឹតបន្តឹងសុវត្ថិភាពប៉ុណ្ណោះទេ ប៉ុន្តែថែមទាំងផ្តល់នូវឯកសារច្បាស់លាស់សម្រាប់អ្នកអភិវឌ្ឍន៍ដែលធ្វើអន្តរកម្មជាមួយ API របស់អ្នក។
ប្រើសំណើ Preflight៖ ទាញយកអត្ថប្រយោជន៍នៃសំណើ preflight ដើម្បីផ្ទៀងផ្ទាត់សំណើឆ្លងដើមមុនពេលទទួលយកពួកគេ។ សំណើ Preflight បន្ថែមស្រទាប់បន្ថែមនៃការផ្ទៀងផ្ទាត់ ដោយធានាថាសំណើពិតប្រាកដអនុលោមតាមគោលការណ៍ CORS របស់អ្នក។
ពិនិត្យមើលគោលការណ៍ CORS ជាទៀងទាត់៖ នៅពេលដែលកម្មវិធីរបស់អ្នកមានការវិវឌ្ឍ សូមពិនិត្យមើលឱ្យបានទៀងទាត់ និងធ្វើបច្ចុប្បន្នភាពគោលការណ៍ CORS របស់អ្នក ដើម្បីឆ្លុះបញ្ចាំងពីការផ្លាស់ប្តូរនៅក្នុងស្ថាបត្យកម្ម និងអន្តរកម្មដែននៃកម្មវិធីរបស់អ្នក។
ផ្សំ CORS ជាមួយវិធានការសុវត្ថិភាពផ្សេងទៀត។៖ CORS គួរតែជាផ្នែកមួយនៃយុទ្ធសាស្ត្រសន្តិសុខដ៏ទូលំទូលាយ។ រួមបញ្ចូលគ្នានូវគោលការណ៍ CORS ជាមួយនឹងគោលនយោបាយសុវត្ថិភាពខ្លឹមសារ (CSP) សុពលភាពនៃការបញ្ចូល ការអ៊ិនកូដលទ្ធផល និងការអនុវត្តល្អបំផុតផ្នែកសុវត្ថិភាពផ្សេងទៀត ដើម្បីការពារប្រឆាំងនឹង XSS និងភាពងាយរងគ្រោះគេហទំព័រផ្សេងទៀត។

តាមរយៈការយល់ដឹងពីផលប៉ះពាល់សុវត្ថិភាពនៃ CORS និងការអនុវត្តគោលនយោបាយ CORS ដ៏តឹងរឹង អ្នកអភិវឌ្ឍន៍អាចការពារកម្មវិធីគេហទំព័ររបស់ពួកគេប្រឆាំងនឹងការវាយប្រហារឆ្លងប្រភពដើម ខណៈពេលដែលបើកដំណើរការអន្តរកម្មឆ្លងប្រភពដើមចាំបាច់ដែលកម្មវិធីបណ្ដាញទំនើបត្រូវការ។

ប្រធានបទ CORS កម្រិតខ្ពស់

នៅពេលដែលកម្មវិធីគេហទំព័ររីកចម្រើនក្នុងភាពស្មុគស្មាញ ការយល់ដឹងអំពីការចែករំលែកធនធានឆ្លងប្រភពដើម (CORS) កាន់តែមានសារៈសំខាន់។ ផ្នែកនេះរុករកប្រធានបទ CORS កម្រិតខ្ពស់ រួមទាំង CORS និងសុវត្ថិភាព API លើសពីការកំណត់មូលដ្ឋាន និងការដោះស្រាយបញ្ហាទូទៅ។

សុវត្ថិភាព CORS និង API៖ ធានាបាននូវសំណើឆ្លងដែនប្រកបដោយសុវត្ថិភាព

APIs គឺជាឆ្អឹងខ្នងនៃកម្មវិធីបណ្តាញទំនើប ដែលជួយសម្រួលដល់ការផ្លាស់ប្តូរទិន្នន័យ និងមុខងារផ្សេងៗតាមសេវាកម្មផ្សេងៗ។ CORS ដើរតួយ៉ាងសំខាន់ក្នុងសុវត្ថិភាព API ដោយធានាថាមានតែប្រភពដែលមានការអនុញ្ញាតប៉ុណ្ណោះដែលអាចចូលប្រើ API របស់អ្នក។ នេះជារបៀបដែល CORS បង្កើនសុវត្ថិភាព API៖

ការផ្ទៀងផ្ទាត់ភាពត្រឹមត្រូវផ្អែកលើនិមិត្តសញ្ញា៖ APIs ជាច្រើនប្រើការផ្ទៀងផ្ទាត់ផ្អែកលើសញ្ញាសម្ងាត់ (ឧ. OAuth 2.0, JWT) ដើម្បីធានាការចូលប្រើ។ គោលការណ៍ CORS ចាំបាច់ត្រូវកំណត់រចនាសម្ព័ន្ធយ៉ាងប្រុងប្រយ័ត្ន ដើម្បីអនុញ្ញាតឱ្យបឋមកថាសញ្ញាសម្ងាត់ ដូចជា Authorizationពីប្រភពដើមដែលអាចទុកចិត្តបាន។ ឧទាហរណ៍ដើម្បីអនុញ្ញាត Authorization បឋមកថាក្នុងសំណើឆ្លងប្រភព ម៉ាស៊ីនមេរបស់អ្នកត្រូវតែរាយបញ្ជីវាឱ្យច្បាស់ Access-Control-Allow-Headers.

Access-Control-Allow-Headers: Authorization

ការប្រើប្រាស់ API ភាគីទីបី៖ នៅពេលដែលកម្មវិធីគេហទំព័ររបស់អ្នកប្រើប្រាស់ APIs ភាគីទីបី ការយល់ដឹងអំពីគោលការណ៍ CORS នៃ APIs ទាំងនេះមានសារៈសំខាន់ណាស់។ ប្រសិនបើ API ភាគីទីបីមានគោលការណ៍រឹតបន្តឹង CORS អ្នកប្រហែលជាត្រូវប្រើប្រូកស៊ីខាងម៉ាស៊ីនមេនៅលើដែនរបស់អ្នកដើម្បីបញ្ជូនសំណើទៅកាន់ API ដោយហេតុនេះជៀសផុតពីការរឹតបន្តឹង CORS ។
បង្ហាញបឋមកថាផ្ទាល់ខ្លួន៖ ប្រសិនបើ API របស់អ្នកប្រើបឋមកថាផ្ទាល់ខ្លួនសម្រាប់ព័ត៌មានជាក់លាក់នៃកម្មវិធី បឋមកថាទាំងនេះត្រូវតែបង្ហាញយ៉ាងច្បាស់ទៅកាន់អតិថិជនតាមរយៈ Access-Control-Expose-Headers. នេះអនុញ្ញាតឱ្យកម្មវិធីភាគីអតិថិជនអានតម្លៃនៃបឋមកថាទាំងនេះ។

Access-Control-Expose-Headers: X-My-Custom-Header

លើសពី CORS មូលដ្ឋាន៖ ការកំណត់រចនាសម្ព័ន្ធកម្រិតខ្ពស់ និងការដោះស្រាយបញ្ហា

ការកំណត់រចនាសម្ព័ន្ធ CORS កម្រិតខ្ពស់អាចដោះស្រាយសេណារីយ៉ូកាន់តែស្មុគស្មាញ៖

ការបញ្ជាក់ប្រភពដើមថាមវន្ត៖ សម្រាប់កម្មវិធីដែលត្រូវការអនុញ្ញាតសំណើពីសំណុំនៃប្រភពដើមថាមវន្ត (ឧ. កម្មវិធីពហុភតិកៈ ដែលភតិកៈនីមួយៗមានដែនផ្ទាល់ខ្លួន) ការអនុវត្តការបញ្ជាក់ប្រភពដើមថាមវន្តគឺចាំបាច់។ នេះពាក់ព័ន្ធនឹងការត្រួតពិនិត្យកម្មវិធី Origin បឋមកថាប្រឆាំងនឹងបញ្ជីនៃប្រភពដើមដែលបានអនុញ្ញាតនិងការកំណត់ Access-Control-Allow-Origin ក្បាលតាម។

const allowedOrigins = ['https://tenant1.example.com', 'https://tenant2.example.com'];
const origin = request.headers.origin;
if (allowedOrigins.includes(origin)) {
    response.setHeader('Access-Control-Allow-Origin', origin);
}

CORS សម្រាប់ WebSockets៖ ខណៈពេលដែល WebSockets មិនមែនជាកម្មវត្ថុនៃ CORS តាមរបៀបដូចគ្នាទៅនឹងសំណើ HTTP ការធានាការតភ្ជាប់ WebSocket គឺមានសារៈសំខាន់ណាស់។ ការធានាថាសំណើចាប់ដៃ WebSocket ដំបូង (ដែលជាសំណើ HTTP) រួមបញ្ចូលការបញ្ជាក់ត្រឹមត្រូវនៃ CORS គឺជាការអនុវត្តដ៏ល្អ។
Preflight Cache Optimization៖ នេះ។ Access-Control-Max-Age បឋមកថាអាចត្រូវបានប្រើដើម្បីបញ្ជាក់រយៈពេលដែលលទ្ធផលនៃសំណើ preflight អាចត្រូវបានរក្សាទុកក្នុងឃ្លាំងសម្ងាត់។ ការបង្កើនប្រសិទ្ធភាពតម្លៃនេះដោយផ្អែកលើរបៀបដែលជាញឹកញាប់ការផ្លាស់ប្តូរគោលការណ៍ CORS របស់អ្នកអាចកាត់បន្ថយចំនួននៃការស្នើសុំការហោះហើរជាមុន ធ្វើអោយប្រសើរឡើងនូវការអនុវត្តកម្មវិធី។

Access-Control-Max-Age: 86400

ការដោះស្រាយបញ្ហា CORS ទូទៅ

ទោះបីជាមានការដំឡើង CORS ត្រឹមត្រូវក៏ដោយ បញ្ហាអាចកើតឡើង។ នេះគឺជាយុទ្ធសាស្ត្រសម្រាប់ដោះស្រាយបញ្ហា CORS ទូទៅ៖

បាត់ ឬមិនត្រឹមត្រូវក្បាល CORS៖ ត្រូវប្រាកដថាម៉ាស៊ីនមេរបស់អ្នកត្រូវបានកំណត់យ៉ាងត្រឹមត្រូវដើម្បីផ្ញើបឋមកថា CORS ដែលរំពឹងទុក។ ឧបករណ៍ដូចជា curl អាចត្រូវបានប្រើដើម្បីពិនិត្យបឋមកថាដោយដៃ៖

curl -I -H "Origin: https://example.com" https://api.example.com/resource

ការឆ្លើយតបស្រអាប់នៅក្នុង JavaScript Fetch API៖ នៅពេលធ្វើការស្នើរសុំជាមួយ Fetch API ការឆ្លើយតបស្រអាប់ (ការឆ្លើយតបពីសំណើគ្មាន cors) អាចនាំឱ្យមានបញ្ហា ដោយសារវាកំណត់ប្រភេទព័ត៌មានដែលអ្នកអាចចូលប្រើអំពីការឆ្លើយតប។ ត្រូវប្រាកដថាអ្នកមិនបានកំណត់ mode: 'no-cors' នៅក្នុងសំណើ Fetch API របស់អ្នក លុះត្រាតែចាំបាច់។
កំហុស CORS ជាមួយព័ត៌មានសម្ងាត់៖ ប្រសិនបើសំណើរបស់អ្នករួមបញ្ចូលព័ត៌មានសម្ងាត់ (ខូគី ការផ្ទៀងផ្ទាត់ HTTP) សូមធានា Access-Control-Allow-Credentials ត្រូវបានកំណត់ទៅ true, ហើយនោះ។ Access-Control-Allow-Origin មិនមែនជាអក្សរជំនួសទេ (*).
ការកែកំហុសសំណើ Preflight៖ ប្រសិនបើសំណើ preflight បរាជ័យ សូមពិនិត្យមើលថាម៉ាស៊ីនមេរបស់អ្នកគ្រប់គ្រង OPTIONS ស្នើសុំត្រឹមត្រូវ ហើយវាឆ្លើយតបជាមួយនឹងបឋមកថា CORS ដែលសមស្រប (Access-Control-Allow-Methods, Access-Control-Allow-Headers).

តាមរយៈការចូលទៅក្នុងប្រធានបទ CORS កម្រិតខ្ពស់ទាំងនេះ អ្នកអភិវឌ្ឍន៍អាចយល់កាន់តែច្បាស់អំពីរបៀបការពារ និងធ្វើឱ្យកម្មវិធីគេហទំព័ររបស់ពួកគេប្រសើរឡើងសម្រាប់ការចែករំលែកធនធានឆ្លងប្រភព។ ថាតើការដោះស្រាយជាមួយនឹងសុវត្ថិភាព API ការកំណត់រចនាសម្ព័ន្ធ CORS ស្មុគស្មាញ ឬដោះស្រាយបញ្ហា CORS ដែលកំពុងប្រឈម ការយល់ដឹងស៊ីជម្រៅអំពី CORS គឺចាំបាច់សម្រាប់ការអភិវឌ្ឍន៍គេហទំព័រទំនើប។

សេចក្តីសន្និដ្ឋាន

ការយល់ដឹងអំពី CORS គឺចាំបាច់សម្រាប់អន្តរកម្មបណ្ដាញសុវត្ថិភាព។ ការអនុវត្តវាយ៉ាងត្រឹមត្រូវពង្រឹងកម្មវិធីប្រឆាំងនឹងការរំលោភបំពាន គោលការណ៍ដ៏តឹងរឹងរបស់វាការពារប្រឆាំងនឹងការវាយប្រហារ XSS និងការស្វែងរកប្រធានបទកម្រិតខ្ពស់ធ្វើឱ្យការអភិវឌ្ឍន៍គេហទំព័រប្រសើរឡើង។

តើការចែករំលែកធនធានឆ្លងប្រភពដើមគឺជាអ្វី?