ক্রস উত্স অনুরোধের জন্য কুকি সেট করুন

Question 1

কিভাবে কুকিজ ক্রস উত্স ভাগ করবেন? আরও সুনির্দিষ্টভাবে, Set-Cookieশিরোনামের সাথে মিশ্রনে হেডারটি কীভাবে ব্যবহার করবেন Access-Control-Allow-Origin?

এখানে আমার পরিস্থিতির ব্যাখ্যা:

আমি localhost:4000হোস্ট করা একটি ওয়েব অ্যাপে চলমান এমন একটি API এর জন্য একটি কুকি সেট করার চেষ্টা করছি localhost:3000।

দেখে মনে হচ্ছে আমি ব্রাউজারে সঠিক প্রতিক্রিয়া শিরোনাম পেয়েছি, তবে দুর্ভাগ্যক্রমে তাদের কোনও প্রভাব নেই। এগুলি প্রতিক্রিয়া শিরোনাম:

HTTP / 1.1 200 ঠিক আছে
অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স: http: // লোকালহোস্ট: 3000
বৈচিত্র্য: উত্স, গ্রহণ-এনকোডিং
সেট-কুকি: টোকেন = 0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; সর্বাধিক বয়স = 86400; ডোমেন = লোকালহোস্ট: 4000; পথ = /; মেয়াদ শেষ হবে = মঙ্গল, 19 সেপ্টেম্বর 2017 21:11:36 GMT; HttpOnly
বিষয়বস্তুর ধরণ: অ্যাপ্লিকেশন / জেসন; চরসেট = utf-8
সামগ্রী-দৈর্ঘ্য: 180
ইটাগ: W / "b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"
তারিখ: সোমবার, 18 সেপ্টেম্বর 2017 21:11:36 GMT
সংযোগ: বাঁচিয়ে রাখুন

তদতিরিক্ত, আমি Response Cookiesযখন Chrome এর বিকাশকারী সরঞ্জামগুলির নেটওয়ার্ক ট্যাব ব্যবহার করে ট্র্যাফিকটি পরীক্ষা করি তখন আমি কুকির নীচে দেখতে পাব । তবুও, আমি দেখতে পাচ্ছি না কুকিটি নীচে অ্যাপ্লিকেশন ট্যাবটিতে সেট করা আছে Storage/Cookies। আমি কোনও সিওআরএস ত্রুটি দেখতে পাচ্ছি না, তাই আমি ধরে নিচ্ছি যে আমি অন্য কিছু মিস করছি।

কোনও পরামর্শ?

আপডেট আমি:

আমি সার্ভারের একটি শেষ পয়েন্টে অনুরোধ জানাতে একটি প্রতিক্রিয়া-রেডাক্স অ্যাপ্লিকেশনটিতে অনুরোধ মডিউলটি ব্যবহার করছি /signin। সার্ভারের জন্য আমি এক্সপ্রেস ব্যবহার করি।

এক্সপ্রেস সার্ভার:

রেসকুকি ('টোকেন', 'এক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্স, xx ম্যাক্সএজ: 86400000, HTTP কেবল: সত্য, ডোমেন:' লোকালহোস্ট: 3000 '})

ব্রাউজারে অনুরোধ:

অনুরোধ.পোস্ট ({uri: '/ signin', json: {userName: 'userOne', পাসওয়ার্ড: '123456'}}, (ভুল, প্রতিক্রিয়া, বডি) => {
    // স্টাফ করছেন
})

আপডেট দ্বিতীয়:

আমি অনুরোধ এবং প্রতিক্রিয়া শিরোনামগুলি এখন পাগলের মতো নির্ধারণ করছি, তারা অনুরোধ এবং প্রতিক্রিয়া উভয়টিতে উপস্থিত রয়েছে তা নিশ্চিত করে। নীচে একটি স্ক্রিনশট রয়েছে। লক্ষ্য করুন হেডার Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methodsএবং Access-Control-Allow-Origin। অ্যাকজিওসের গিথুবটিতে আমি যে বিষয়টি পেয়েছি তা দেখে , আমি এই ধারণাটির আওতায় আছি যে সমস্ত প্রয়োজনীয় শিরোনাম এখন সেট করা আছে। তবুও, এখনও ভাগ্য নেই ...

Question 2

তোমাকে যা করতে হবে

কোনও সিওআরএস অনুরোধের মাধ্যমে কুকিজ গ্রহণ ও প্রেরণে সাফল্যের জন্য, নিম্নলিখিতটি করুন।

ব্যাক-এন্ড (সার্ভার): HTTP শিরোনাম Access-Control-Allow-Credentialsমান এতে সেট করুন true। এছাড়াও, নিশ্চিত করুন HTTP- র হেডার Access-Control-Allow-Originএবং Access-Control-Allow-Headersনির্ধারণ করা হয় এবং একটি ওয়াইল্ড কার্ড না* ।

এক্সপ্রেস জেএস-এ সিওআর সেট করার বিষয়ে আরও তথ্যের জন্য ডক্সটি এখানে পড়ুন

ফ্রন্ট-এন্ড (ক্লায়েন্ট):XMLHttpRequest.withCredentials পতাকাটি সেট করুন এতে trueব্যবহৃত অনুরোধ-প্রতিক্রিয়া গ্রন্থাগারের উপর নির্ভর করে এটি বিভিন্ন উপায়ে অর্জন করা যেতে পারে:

jQuery 1.5.1 xhrFields: {withCredentials: true}
ES6 আনুন () credentials: 'include'
অক্ষ :withCredentials: true

বা

কুকিজের সাথে সমন্বয় করে সিওআরএস ব্যবহার করা এড়িয়ে চলুন। আপনি একটি প্রক্সি দিয়ে এটি অর্জন করতে পারেন।

আপনি যদি কোনও কারণে এটি এড়াবেন না। সমাধান উপরে।

It turned out that Chrome won't set the cookie if the domain contains a port. Setting it for localhost (without port) is not a problem. Many thanks to Erwin for this tip!

Question 3

2020 এ প্রকাশিত ক্রোম ব্রাউজারের জন্য নোট।

ভবিষ্যতের ক্রোমের প্রকাশ কেবল ক্রস-সাইট অনুরোধের সাথে কুকিজ বিতরণ করবে যদি সেগুলি সেট করা থাকে SameSite=Noneএবং Secure।

সুতরাং যদি আপনার ব্যাকএন্ড সার্ভার সেমসাইট = কোনওটি সেট না করে, ক্রোম ডিফল্টরূপে সেমসাইট = লক্ষ ব্যবহার করবে এবং এই কুকিটি red উইথড্রেনডিয়েন্টালস: সত্য} অনুরোধগুলির সাথে ব্যবহার করবে না।

আরও তথ্য https://www.chromium.org/updates/same-site ।

ফায়ারফক্স এবং এজ বিকাশকারীরা ভবিষ্যতে এই বৈশিষ্ট্যটি প্রকাশ করতে চান।

স্পেস এখানে পাওয়া গেছে: https://tools.ietf.org/html/draft-west-cookie- সংশ্লেষবাদ 0-0# পৃষ্ঠা-8

Question 4

ক্রস-উত্স অনুরোধগুলি থেকে ক্লায়েন্ট কুকিগুলি পড়তে সক্ষম হওয়ার জন্য, আপনার প্রয়োজন:

সার্ভারের সমস্ত প্রতিক্রিয়াগুলির তাদের শিরোনামে নিম্নলিখিত হওয়া দরকার:

Access-Control-Allow-Credentials: true
ক্লায়েন্টকে withCredentials: trueবিকল্প সহ সমস্ত অনুরোধগুলি প্রেরণ করতে হবে

কৌণিক 7 এবং স্প্রিং বুট দিয়ে আমার বাস্তবায়নে, আমি নিম্নলিখিতটি দিয়ে তা অর্জন করেছি:

সার্ভার-সাইড:

@CrossOrigin(origins = "http://my-cross-origin-url.com", allowCredentials = "true")
@Controller
@RequestMapping(path = "/something")
public class SomethingController {
  ...
}

origins = "http://my-cross-origin-url.com"অংশ যোগ হবে Access-Control-Allow-Origin: http://my-cross-origin-url.comযে সার্ভারের প্রতিক্রিয়া হেডার

allowCredentials = "true"অংশ যোগ হবে Access-Control-Allow-Credentials: trueক্লায়েন্ট কুকিজ পড়ার জন্য অনুক্রমে যে সার্ভারের প্রতিক্রিয়া শীর্ষক, যা আমরা কি প্রয়োজন

মক্কেলের পক্ষে:

import { HttpInterceptor, HttpXsrfTokenExtractor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from 'rxjs';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

    constructor(private tokenExtractor: HttpXsrfTokenExtractor) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // send request with credential options in order to be able to read cross-origin cookies
        req = req.clone({ withCredentials: true });

        // return XSRF-TOKEN in each request's header (anti-CSRF security)
        const headerName = 'X-XSRF-TOKEN';
        let token = this.tokenExtractor.getToken() as string;
        if (token !== null && !req.headers.has(headerName)) {
            req = req.clone({ headers: req.headers.set(headerName, token) });
        }
        return next.handle(req);
    }
}

এই শ্রেণীর সাহায্যে আপনি আপনার সমস্ত অনুরোধে অতিরিক্ত জিনিস ইনজেক্ট করেন।

প্রথম অংশটি req = req.clone({ withCredentials: true });হ'ল withCredentials: trueবিকল্পটির সাথে প্রতিটি অনুরোধ প্রেরণের জন্য আপনার যা প্রয়োজন । এর ব্যবহারিকভাবে এর অর্থ হ'ল প্রথমে একটি বিকল্প অনুরোধটি প্রেরণ করা হবে, যাতে আপনি প্রকৃত POST / PUT / DELETE অনুরোধগুলি প্রেরণের আগে তাদের মধ্যে আপনার কুকিজ এবং অনুমোদনের টোকেন পান, যাতে তাদের (শিরোনামে) সাথে এই টোকেন সংযুক্ত করা দরকার in অনুরোধটি যাচাই করতে এবং কার্যকর করতে সার্ভারের আদেশ করুন।

দ্বিতীয় অংশটি হ'ল বিশেষভাবে সমস্ত অনুরোধগুলির জন্য একটি অ্যান্টি-সিএসআরএফ টোকেন পরিচালনা করে। প্রয়োজনমতো এটি কুকি থেকে পড়ে এবং প্রতিটি অনুরোধের শিরোনামে এটি লিখে দেয়।

কাঙ্ক্ষিত ফলাফলটি এরকম কিছু:

Question 5

পিমের উত্তরটি খুব সহায়ক। আমার ক্ষেত্রে, আমি ব্যবহার করতে হবে

Expires / Max-Age: "Session"

এটি যদি ডেটটাইম হয়, এমনকি এটির মেয়াদও শেষ হয় না, এটি এখনও কুকিকে ব্যাকএন্ডে পাঠায় না:

Expires / Max-Age: "Thu, 21 May 2020 09:00:34 GMT"

আশা করি এটি ভবিষ্যতের লোকদের জন্য সহায়ক যারা একই সমস্যা দেখা দিতে পারে।

Question 6

এক্সপ্রেসের জন্য, আপনার এক্সপ্রেস লাইব্রেরিটি 4.17.1সর্বশেষতম স্থিতিশীল সংস্করণে আপগ্রেড করুন । তারপরে;

CorsOption ইন: সেট originআপনার স্থানীয় হোস্ট URL বা আপনার ফ্রন্টএন্ড প্রকাশনা URL- এ এবং credentialsকরতে true উদাঃ

  const corsOptions = {
    origin: config.get("origin"),
    credentials: true,
  };

আমি কনফিগার এনপিএম মডিউলটি ব্যবহার করে আমার উত্স গতিশীলভাবে সেট করেছি ।

তারপরে, রেজ-কুকিতে:

লোকালহোস্টের জন্য: আপনার কোনও ক্ষেত্রেই একই সাইট এবং সুরক্ষিত বিকল্প সেট httpOnlyকরার দরকার নেই , আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে trueএক্সএসএস আক্রমণ এবং অন্যান্য দরকারী বিকল্পগুলি রোধ করতে আপনি HTTP কুকির জন্য সেট করতে পারেন ।

উত্পাদনের পরিবেশের জন্য, আপনাকে ক্রস-অরিজিন অনুরোধ এবং এর জন্য সেট sameSiteকরতে হবে । মনে রাখবেন কেবলমাত্র এখনকার মতো এক্সপ্রেস সর্বশেষ সংস্করণে কাজ করে এবং সর্বশেষ ক্রোম সংস্করণটি কেবল কুকি সেট করে , সুতরাং নিরাপদ বিকল্পের প্রয়োজন।nonesecuretruesameSitehttps

এখানে আমি খনিকে গতিশীল করে তুলেছি

 res
    .cookie("access_token", token, {
      httpOnly: true,
      sameSite: app.get("env") === "development" ? true : "none",
      secure: app.get("env") === "development" ? false : true,
    })