Bài viết được sự cho phép của tác giả Trần Anh Tuấn

Ở bài viết này mình sẽ chia sẻ cho các bạn 3 cách code border gradient trong CSS, không giới thiệu dài dòng, mình đi thẳng vào từng cách một luôn nhé ⚡️

Chúng ta sẽ có HTML và CSS cơ bản như sau

<div class="boxed"></div>

Border image slice

Với cách này thì chúng ta sẽ sử dụng 2 thuộc tính trong CSS đó chính là border-image-slice và border-image-source, cách này nhanh gọn lẹ nhất, tuy nhiên có một nhược điểm đó chính là không dùng được với border-radius(khi làm bo góc)

.boxed {
width: 200px;
height: 200px;
border: 10px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to right bottom, #6a5af9, #f62682);
}

Chúng ta sẽ có kết quả như sau

Dùng thêm thẻ con bên trong

Trường hợp này thì chúng ta sẽ dùng một trick đó chính là tạo background gradient cho .boxed bình thường, sau đó thêm padding tương ứng cho độ dày của border, và bên trong tạo thêm 1 thẻ html ví dụ là .boxed-child chẳng hạn và cho nó màu nền trùng với màu nền của body

<div class="boxed">
<div class="boxed-child"></div>
</div>

Chúng ta sẽ có kết quả như dưới đây kèm bo góc luôn, tuy nhiên cách làm này không hay, vì đôi khi chúng ta không được phép thêm HTML vào bên trong thì sao, vì thế sẽ có cách số 3 đó chính là sử dụng lớp giả :before hoặc :after để xử lý.

Sử dụng before hoặc after

Nếu buộc phải có bo góc thì mình nghĩ dùng cách này là ổn áp nhất và chúng ta sẽ có code CSS như sau, các bạn chú ý những thuộc tính quan trọng đó chính là background-clip: padding-box và chỗ margin: -10px nó sẽ tương ứng cho border: 10px ví dụ border 20px thì margin sẽ là -20px nhé.

.boxed {
width: 200px;
height: 200px;
position: relative;
background-clip: padding-box;
border: 10px solid transparent;
background-color: #191a28;
border-radius: 20px;
} .boxed:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
margin: -10px;
background-image: linear-gradient(to right top, #2979ff, #07a787);
border-radius: inherit;
}

Và đây là kết quả

Trên đây là 3 cách tạo border gradient trong CSS mà mình biết, hi vọng sẽ có ích cho các bạn nhé.

Bài viết gốc được đăng tải tại evondev.com

Những bài viết này cũng hữu ích lắm nè:

• Thành thạo kỹ năng CSS của bạn với bộ code cực chất
• Stack Overflow Là Gì? Vì Sao Đệ Quy Lại Dễ Gây Tràn Stack?
• Cách Trình Duyệt Hiển Thị Website Của Bạn

Top Developers đừng bỏ lỡ cơ hội việc làm IT trên TopDev nhé!

Bài viết được sự cho phép của tác giả Lê Xuân Quỳnh

Qua 1 vòng Google để tìm hiểu về JWT thì không thấy ông Việt Nam nào nói cho tử tế và đầy đủ để 1 thằng newbie như mình hiểu. Sau đó vô tình mình tìm kiếm một bài viết mình cho là ổn nhất về JWT, nên mạo phép vừa dịch vừa sử dụng theo ý mình, những ai đọc được tiếng Anh có thể xem ở đây cho chuẩn: https://medium.com/swlh/building-a-user-auth-system-with-jwt-using-golang-30892659cc0

Vậy JWT là gì?

Chúng ta đều biết rằng, để nâng cao tính bảo mật khi làm các ứng dụng client-server thì cần có các cơ chế sinh token nhằm xác định request hợp lệ, tránh tình huống bị tấn công bởi các hacker vào hệ thống.

JWT = JSON Web Token, hiểu nôm na là xác thực người dùng từ phía máy chủ bằng JSON.

Theo cách tiếp cận truyền thống, chúng ta có các sessions để xác thực người dùng, khi mà người dùng đăng nhập thành công thì sẽ tạo ra 1 token lưu trên máy chủ để xác thực cho các request tiếp theo. Server sẽ gửi sessions ID cho client, và client sẽ gửi ID này kèm với các request sau đó, để server query trên database nhằm kiểm tra xem có đúng đó là request hợp lệ không.

Tuy nhiên, phương pháp này gặp nhiều khó khăn khi hệ thống cần scale lớn, xây dựng theo dạng Microservice với data lưu ở mỗi service khác nhau. Ví dụ bạn có n cụm máy chủ, thì để xác thực thành công, bạn phải truy vấn token lưu ở n máy chủ rồi so sánh, rất mất thời gian, cũng như dễ bị tấn công nếu như 1 máy chủ nào đó bị tấn công chiếm token. Tốt nhất là không lưu token trên máy chủ.

JWT ra đời nhằm giải quyết bài toán đó. Nó là phương pháp xác thực cho MSA(microservice architecture). Với cách tiếp cận này, thông tin xác thực chỉ lưu ở client-side. JWT đơn giản là 1 JSON payload để lưu định danh user đó. Nó đơn giản là 1 token chứa thông tin xác thực dạng Message Authentication Code(MAC), gồm 3 thành phần chính: header, payload và signature ngăn cách nhau bởi dấu chấm.

Ví dụ 1 token như sau:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Chúng ta thấy 1 token có 3 thành phần sau khi decoded như sau:

Phần header chứa metadata, bao gồm kiểu mã hóa của token, ở trên là HS256, dạng JWT. Để hiểu hơn các dạng mã hóa vui lòng tìm kiếm thêm từ khóa mã hóa công khai trên Google bạn nhé.

Phần Payload chứa thông tin xác định thằng user đó, ở trên là tên, sub, iat.

Phần còn lại là chữ ký. Chữ ký này là chữ ký điện tử các bạn nha, không phải là chữ ký khi bạn ký đơn kết hôn với vợ đâu, nhưng về mặt ý nghĩa thì nó cũng tương tự, là 1 khi đã ký thì bạn không thể thay đổi được nữa, bút sa gà chết.

Công thức ký như sau:

signature = hmacsha256(encoded_header + “.” + encoded_payload, “server_secret”)

hmacsha256 chính là 1 hàm băm sha 256, bạn hiểu nôm na là băm xong thì không chuyển ngược lại giữ liệu ban đầu, hay nói cách khác là 1 hàm 1 chiều, giống như bạn cho 1 con bò vào máy và tạo ra 1 cây xúc xích còn điều ngược lại thì không thể vậy đó. Hàm này băm header, encoded payload và khóa bí mật của server. Khái niệm băm cũng y chang bạn băm thịt vậy, cho xương, thịt.. mọi thứ và băm nhuyễn đến khi nào bạn lấy 1 mẩu trong đó ra thì nó có tính chất tương tự mọi nơi ở cục thịt sau khi băm.

Do vậy, khi chúng ta gửi 1 request gồm header và payload sau khi encoded trên thì phía server sẽ tiến hành băm chúng với khóa bí mật của server và tạo ra 1 chữ ký, rồi gửi lại cho client. Các lần request tiếp theo, nó cũng làm tương tự và tiến hành so sánh chữ ký mới nhất với chữ ký đã có trước đó, nếu như nó trùng nhau nghĩa là matches, request là hợp lệ. Luồng hoạt động của nó như sau:

1. Client gửi thông tin đăng nhập gồm username và password.
2. Server kiểm tra thông tin đó có tồn tại trong database không và tính hợp lệ của request.
3. Nếu hợp lệ, JWT sẽ tạo 1 payload chứa thông tin định danh user và thời gian hiệu lực – expiration timestamp(chúng ta sẽ nói sau).
4. Server sẽ tạo ra signature gồm 2 thành phần như đã nói ở trên. JWT đã hoàn thành xong 1 token gồm 3 thành phần header + payload + signature.
5. Server sẽ gửi lại cho client thông tin token này để lưu lại, nhằm để client xác thực trong các request sau này.
6. Với các request tiếp theo, server sẽ xác thực token bằng việc kiểm tra thời gian hiệu lực của token và tạo ra 1 chữ ký mới, sau đó so sánh với chữ ký đã sẵn có trong token.

Sơ đồ hoạt động của JWT.

Vậy rõ ràng server không hề lưu token mà nó chỉ lưu duy nhất mỗi secret key để tạo ra chữ ký mà thôi. Cho nên nếu giả sử như chúng ta bị lộ khóa tới tay hacker thì server rất dễ bị tấn công. Do vậy chúng ta phải bảo mật khóa này. Có nhiều trường hợp commit cả khóa lên source code, dẫn đến lộ thông tin khóa mà server bị tấn công. Về phần này, các bạn có thể đọc thêm về cơ chế gitignore các file .env để không commit các thông tin nhạy cảm như khóa.

Cho đến thời điểm này khi nói về JWT thì chúng ta chỉ nói 1 khái niệm token chung. Nhưng thực tế chúng ta có 2 loại token, đó là AccessToken và RefreshToken.

Top việc làm Golang lương cao có tại TopDev

Tại sao lại có AccessToken và RefreshToken?

Bản chất 2 thằng trên đều là JSON Web Token, vậy tại sao lại cần tới 2 cái lận? Như bạn đã biết, JWT chứa đầy đủ thông tin cần thiết để xác thực, và hãy thử tượng tượng xem điều gì sẽ ra khì token này lọt vào 1 tay hacker nào đó. Hắn có thể sẽ giả mạo người dùng và bắt đầu làm chuyện tầm bậy với server của chúng ta như ăn cắp dữ liệu, tệ hơn là phá hỏng database. Do vậy người ta đẻ ra 1 cái gọi là access token, nhằm valid mỗi request của chúng ta, nó có đặc điểm là sẽ hết hạn sau 1 khoảng thời gian ngắn. Điều này nhằm hạn chế rủi ro khi hacker có được access token của bạn, họ cũng không phá hoại được nhiều.

Vậy thì khi access token này hết hạn, đồng nghĩa với việc user này cũng sẽ hết quyền truy vấn, do vậy chúng ta cần loại token thứ 2 để refresh lại token này, gọi là refresh token. Ở đây chúng ta cũng có thể check time expried của token, tuy nhiên giả sử như token hết hạn thì ta phải yêu cầu người dùng đăng nhập lại nhiều lần, làm cho người dùng khó chịu mà bỏ app, thì không ai muốn đúng không?

Refresh token này sẽ không bao giờ hết hạn hoặc hết hạn trong khoảng thời gian dài(ví dụ Google, github và Facebook thường là 90 ngày) và có nhiệm vụ tạo 1 access token mới từ Server. Tất nhiên, nếu bạn cũng để lộ refresh token này thì coi như toi, hacker lại có thể tấn công bạn được. Nhưng rõ ràng access token thì sử dụng với tuần suất lớn, còn refresh token thì chỉ khi nào access token hết hạn mới dùng đến thôi. Do vậy tăng tính bảo mật hơn đúng không nào?

Sơ đồ hoạt động của access token và refresh token.

Một ví dụ thực tế mà các hacker tấn công vào facebook, khi tạo ra các ứng dụng giả mạo hoặc các tool hỗ trợ facebook như xóa bạn bè, tự động like hay share. Họ yêu cầu người dùng cấp rất nhiều quyền, sau đó server facebook sẽ sinh ra 1 refresh token để có thể cấp quyền cho user. Khi họ có được nó, ai mà biết được họ đã làm những gì ngoài những tiện ích mà người dùng có được. Ví dụ như chạy quảng cáo chùa, tạo ra các tool để kiếm tiền trên facebook. Xem thêm tại đây:

https://vov.vn/cong-nghe/tin-moi/facebook-kien-4-nguoi-song-tai-viet-nam-tan-cong-chiem-doat-tai-khoan-870128.vov

Quay lại bài viết, sau khi user gửi thông tin username và password lên, server sẽ tạo ra 2 token gồm access token và refresh token và gửi trả lại cho client. Client gửi access token lên server để xác thực. Access token sẽ hết hạn trong thời gian ngắn, và client dùng refresh token để lấy 1 access token mới.

Hi vọng là bạn đã hiểu được ý nghĩa của JWT rồi. Trong phần tiếp theo chúng ta sẽ nghiên cứu cách triển khai JWT trong Golang.

Bài viết gốc được đăng tải tại codetoanbug.com

Xem thêm nhiều bài khác nữa:

• Golang là gì? 9 Framework tối ưu “cực căng” cho Golang
• Quản lí Package Trong GoLang
• Tìm hiểu về Graceful Shutdown, Graceful Shutdown trong Golang

Đừng bỏ lỡ top việc làm IT trên TopDev nhé!

Bài viết được sự cho phép của tác giả Trần Anh Tuấn

Xin chào các bạn hôm nay ngồi code rồi thấy có nhiều đoạn code được dùng đi dùng lại thường xuyên trong quá trình làm từ trước đến giờ, thấy khá là hữu ích cho nên mình quyết định chia sẻ lên blog này để cho các bạn có thể vào tham khảo và lấy về dùng luôn. Những đoạn code này khá cơ bản nhưng thực sự cần thiết trong nhiều trường hợp lắm đây. Chúng ta cùng khám phá dưới đây 20 tấm ảnh kèm ghi chú đi theo cực kỳ chi tiết nhé.

# Center với Flexbox

Đoạn code này khi các bạn muốn làm các phần tử hiển thị chính giữa khi sử dụng với CSS Flexbox nhé.

# Center với CSS Grid

Đoạn này chức năng tương tự đoạn trên nhưng mà sử dụng CSS Grid nhé các bạn. Place-items tương ứng là align-items và justify-content áp dụng với CSS Grid.

# Center theo chiều ngang với absolute

Đoạn code này khi các bạn muốn một phần tử canh giữa theo chiều ngang với thuộc tính position: absolute nhé. Rất hay dùng khi làm việc với thuộc tính position khi căn chỉnh phần tử á.

# Center theo chiều dọc với absolute

Đoạn code này khi các bạn muốn một phần tử canh giữa theo chiều dọc với thuộc tính position: absolute nhé.

# Center theo 2 chiều với absolute

Đoạn code này khi các bạn muốn một phần tử canh giữa theo chiều ngang và chiều dọc luôn cũng với thuộc tính position: absolute nhé.

# Viết rút gọn code CSS cho thuộc tính border

# Viết rút gọn code CSS cho thuộc tính background

# Viết rút gọn code CSS cho giá trị về màu sắc

Nếu mã màu trùng nhau 6 ký tự thì các bạn chỉ cần điền vào 3 là đủ hoặc theo cấu trúc aabbcc thì có thể viết thành abc là được.

# Viết rút gọn code CSS cho thuộc tính về font

Xem thêm các việc làm CSS lương cao trên TopDev

# Hiển thị dấu 3 chấm

Đoạn code này giúp các bạn hiển thị chữ trên 1 hàng mà thôi nếu chữ quá dài thì sẽ xuất hiện dấu 3 chấm… nhe.

# CSS cho placeholder của input, textarea

# CSS cho selection

Khi các bạn vào một trang web các bạn muốn copy nội dung nào đó thì các bạn sẽ bôi đen nó, đoạn code này giúp CSS cho đoạn bôi đen đó đấy nhé. Khá là hay ho.

# Ẩn icon mũi tên ở input có type là number

# Box-sizing

Đoạn code này sẽ được toàn bộ selectors về box-sizing: border-box để hiển thị kích thước cho đúng nhé. Quan trọng lắm nha các bạn.

# Sử dụng đơn vị rem

Nếu các bạn không thích code với đơn vị px cố định thì các bạn có thể sử dụng đơn vị rem nhé, đoạn code này giúp đưa font-size về cơ số 10 cho dễ tính toán. Lúc này 1rem = 10px.

# Responsive media

Nếu các bạn muốn hiển thị video, hình ảnh theo tỉ lệ như 16:9 hay 4:3 thì các bạn có thể dùng biến trong CSS như mình để lưu lại, sau đó dùng CSS để tính toán như dưới đây để video hay hình ảnh có thể hiển thị responsive nhé. HTML của nó trông như thế này:

<div class="responsive-media">
 <img src=""/>
</div>
<div class="responsive-media">
 <iframe src="youtube"></iframe>
</div>

# Background gradient

Đây không đơn thuần là làm background gradient thông thường, mà là các bạn muốn sử dụng 2 lớp nền, lớp ở trên là gradient mờ mờ, còn ở dưới là một hình nền thì các bạn có thể sử dụng đoạn code dưới đây nha. Các bạn sẽ thay mã màu tương ứng cho phù hợp với thiết kế của các bạn và hình nền nhé.

# Hiển thị dấu 3 chấm cho nhiều dòng

Ở mục phía trên mình có nói tới vấn đề hiển thị dấu 3 chấm trên một hàng, còn đoạn code này sẽ giúp các bạn hiển thị dấu 3 chấm… cho nhiều hàng, ví dụ bạn muốn nếu chữ nhiều quá thì tới dòng thứ 5 sẽ hiển thị dấu 3 chấm thì các bạn thay giá trị ở đoạn code -webkit-line-clamp thành 5 chẳng hạn nhé.

# Gradient cho chữ

# Tuỳ chỉnh thanh scroll

Mặc định thanh scrollbar không được đẹp cho lắm thì các bạn có thể dùng đoạn code dưới đây để làm cho nó hiển thị theo ý các bạn nhé. Tuy nhiên việc custom này không hỗ trợ trên Firefox nhé.

# Tạm kết

Bài này mình sẽ cập nhật thường xuyên nếu có những đoạn code mới hay ho và bổ ích cho các bạn nhé. Mình không để code sẵn để các bạn copy vì mình nghĩ nếu các bạn tự gõ lại thì sẽ mau nhớ và mau giỏi hơn cũng như hiểu được bản chất của các thuộc tính trong CSS. Cuối cùng chúc các bạn học tập thật tốt nhé..

Bài viết gốc được đăng tải tại evondev.com

Mình nghĩ những bài viết về CSS này sẽ giúp ích cho các bạn:

• CSS cơ bản toàn tập dành cho người mới phần 1
• Học CSS Flexbox toàn tập phần 1
• Hướng dẫn học CSS Grid toàn tập phần 1

Đừng bỏ lỡ việc làm IT hấp dẫn trên TopDev

Hai chương trình Thạc sĩ Trí tuệ Nhân tạo (AI) và Thạc sĩ An toàn Thông tin (Cyber Security) sẽ được đại học RMIT Việt Nam đưa vào giảng dạy từ tháng 6 năm 2022.

Đây cũng là lần đầu tiên nhà trường ra mắt hai chương trình Thạc sĩ chuẩn quốc tế cho khối ngành STEM (Khoa học, Công nghệ, Kỹ thuật và Toán học). Không chỉ được công nhận toàn cầu, mỗi chương trình đều mang những dấu ấn và những đặc thù riêng, đáng để tìm hiểu trước khi chọn lựa hướng đi cho tương lai.

Chương trình Thạc sĩ Trí tuệ Nhân tạo được thiết kế cho những ai có mong muốn tập trung và đào sâu vào những ứng dụng của AI nhằm thúc đẩy sự phát triển của công nghệ. Chương trình có 3 khối kiến thức chính: thiết kế và phát triển AI, học máy/ học sâu và khoa học dữ liệu.

Trong bối cảnh tăng trưởng chóng mặt của lĩnh vực này, đại học RMIT tự hào được Hội đồng Nghiên cứu Úc vinh danh là cơ sở có những nghiên cứu AI “vượt chuẩn thế giới”. Học viên sẽ được phổ cập những kiến thức nâng cao và cấp tiến nhất về điện toán, phát triển và lắp đặt các hệ thống AI trong môi trường nghiên cứu lẫn môi trường hành nghề chuyên nghiệp, cũng như luôn luôn trau dồi kỹ năng và ý thức đạo đức nghề. Sau khi tốt nghiệp, học viên có thể theo đuổi các vị trí như kỹ sư AI, chuyên gia phân tích dữ liệu hoặc nhà nghiên cứu về khoa học dữ liệu, thuật toán hay những tích hợp của AI.

Với chương trình Thạc sĩ An toàn Thông tin, cũng là chương trình lâu đời nhất của Úc ở lĩnh vực này, học viên sẽ học cách kiến tạo một không gian mạng an toàn, giảm thiểu rủi ro cho người dùng, doanh nghiệp và tổ chức giữa bối cảnh bùng nổ kỹ thuật số. 

Chương trình cho học viên tiếp cận những nhánh chuyên môn nhỏ hơn, bao gồm bảo mật internet và hệ thống LAN, các dạng thức khác nhau của mật mã học, và mật mã học cải tiến để giải quyết các rủi ro trong tương lai. Trên hết, không chỉ được học về yếu tố khoa học và kỹ thuật, học viên còn được học sâu về yếu tố con người và doanh nghiệp, trở thành những chuyên gia toàn diện, đáp ứng được nhu cầu của thị trường ngày nay khi các tổ chức và công ty đang không ngừng săn đón những nhà quản lý cấp cao, những kỹ sư thiết kế – hệ thống an toàn thông tin.

Vì cả hai chương trình đều đến từ RMIT Melbourne, học viên sẽ được học tập với các chuyên gia đầu ngành từ RMIT Melbourne & RMIT Việt Nam trong môi trường giáo dục linh hoạt, song hành giữa những kiến thức chuyên ngành bắt buộc và những môn tự chọn hấp dẫn để để đa dạng hoá kiến thức, hướng theo chuyên môn mong muốn. Ngoài ra, những học viên có sẵn kiến thức nền về công nghệ thông tin, máy tính hoặc các lĩnh vực liên quan đều có thể được xem xét miễn giảm môn học.

Đặc biệt, ở những học kỳ cuối cùng, mỗi chương trình đều có những môn học hoặc những hướng phát triển đặc thù được thiết kế theo mô hình học tập kết hợp thực tiễn (WIL- work integrated learning) – mô hình đã làm nên danh tiếng của đại học RMIT trong nhiều năm qua. Với Thạc sĩ An toàn Thông tin, học viên sẽ phải hoàn thành hai môn học nhận thức ngành và kết nối ngành để sẵn sàng cho công việc ngay sau khi tốt nghiệp. Còn với Thạc sĩ Trí tuệ Nhân tạo, học viên có hai lựa chọn: hoặc thực hiện một dự án AI với doanh nghiệp đối tác; hoặc nghiên cứu chuyên sâu về AI để hoàn thành một luận án làm tiền đề vững chắc cho những ai muốn theo đuổi học vị Tiến sĩ.

Tại Việt Nam, đại học RMIT không còn xa lạ với những ai muốn theo đuổi học vị Thạc sĩ. Những chương trình bậc cao học về Quản trị Kinh doanh hay Kinh doanh Quốc tế đã và đang thu hút nhiều học viên. Với hai chương trình Thạc sĩ mới này, RMIT mong muốn đáp ứng được nhu cầu tuyển dụng của thị trường khoa học – công nghệ để không ngừng đào tạo thêm những nhà lãnh đạo cho tổ chức, doanh nghiệp trong và ngoài nước.

Hai chương trình Thạc sĩ Trí tuệ Nhân tạo (AI) và Thạc sĩ An toàn Thông tin (Cyber Security) sẽ ra mắt vào ngày 26/3/2022, chính thức tuyển sinh cho kỳ nhập học tháng 6 ngay sau đó. Để đăng ký tham gia sự kiện ra mắt chương trình và tìm hiểu thêm về những cơ hội học bổng lên tới 400 triệu/ suất, bạn có thể đăng ký tại đây.