Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(@toss/utils): correct hex validation to prevent unexpected color parsing #458

Merged
merged 8 commits into from
May 31, 2024

Conversation

BO-LIKE-CHICKEN
Copy link
Contributor

Overview

While working on a project that exclusively uses Hex color codes, I discovered that converting existing library variables to RGBA format does not properly handle formats like #FFFFFF80. Upon further inspection of the library, I identified several issues.

  1. The library determines the color format based on the string's length, allowing for errors like e3e3e33 (an accidental extra '3') to pass through tests. This could potentially lead to unintended side effects, such as:

    • TypeScript does not flag this as an error, resulting in oversight that remains unnoticed until runtime.
    • The user expects the color rgba(227,227,227,1) but gets an unexpected rgba(62,62,51,1) due to the typo. To prevent this, I've:
      1. Added test cases.
      2. Implemented an alternative conditional approach (starting with “#”) to pass these tests. Although there are concerns about backward compatibility, this seems to be the most reliable solution.
  2. The library does not support Hex Colors with alpha values, like #FFFFFF80. This issue was not addressed in the pull request, as it seems to require a policy decision on handling alpha values in Hex colors.

  3. The library does not support shorthand Hex Colors like #FFF. Although the existing test cases already throw errors for this format, I've only added more test cases to cover these scenarios.

Issue 1 clearly presents a problem, while the approach to addressing issues 2 and 3 is left to your discretion.

PR Checklist

  • I read and included theses actions below
  1. I have read the Contributing Guide
  2. I have written documents and tests, if needed.

Copy link

netlify bot commented Mar 29, 2024

👷 Deploy request for slash-libraries pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 1754725

@ssi02014
Copy link
Contributor

ssi02014 commented Mar 31, 2024

@BO-LIKE-CHICKEN Hi! 👋
Looks like an interesting Pull Request. I have a minor comment to make! 🙏
I think I can shorten the 2 validations by utilizing regular expressions.

In my opinion, it becomes simpler and more readable..!
What do you think? 🤗

The code below passes both the existing and added test code!! 💪

(+) Additionally, slash should be written in English, and I understand that existing code written in Korean is being changed incrementally

+ export function isValidHexValue(hex: string) {
+  const regex = /^#?[0-9A-Fa-f]{6}$/;
+  return regex.test(hex);
+ }

export function hexToRgba(hex: string, alpha = 1) {
+  if (!isValidHexValue(hex)) {
+    throw new Error(`Invalid hex value: ${hex}`);
+  }

  if (!isAlphaValue(alpha)) {
    throw new Error(`Invalid alpha value(0~1): ${alpha}`);
  }

  const normalizedHex = hex.startsWith('#') ? hex.slice(1) : hex;

- if (normalizedHex.length !== 6) {
-   throw new Error(`잘못된 normalizedHex 값의 길이입니다. 정확히 6자리여야 합니다: ${normalizedHex}`);
- }

  const r = parseHexValueStr(normalizedHex.slice(0, 2));
  const g = parseHexValueStr(normalizedHex.slice(2, 4));
  const b = parseHexValueStr(normalizedHex.slice(4, 6));

-  if ([r, g, b].some(value => Number.isNaN(value) || !isRGBDecimalValue(value))) {
-    throw new Error(`잘못된 hex값 입니다: ${hex}`);
-  }

  return `rgba(${r},${g},${b},${alpha})`;
}

@BO-LIKE-CHICKEN
Copy link
Contributor Author

BO-LIKE-CHICKEN commented Mar 31, 2024

@BO-LIKE-CHICKEN Hi! 👋 Looks like an interesting Pull Request. I have a minor comment to make! 🙏 I think I can shorten the 2 validations by utilizing regular expressions.

In my opinion, it becomes simpler and more readable..! What do you think? 🤗

The code below passes both the existing and added test code!! 💪

(+) Additionally, slash should be written in English, and I understand that existing code written in Korean is being changed incrementally

+ export function isValidHexValue(hex: string) {
+  const regex = /^#?[0-9A-Fa-f]{6}$/;
+  return regex.test(hex);
+ }

export function hexToRgba(hex: string, alpha = 1) {
+  if (!isValidHexValue(hex)) {
+    throw new Error(`Invalid hex value: ${hex}`);
+  }

  if (!isAlphaValue(alpha)) {
    throw new Error(`Invalid alpha value(0~1): ${alpha}`);
  }

  const normalizedHex = hex.startsWith('#') ? hex.slice(1) : hex;

- if (normalizedHex.length !== 6) {
-   throw new Error(`잘못된 normalizedHex 값의 길이입니다. 정확히 6자리여야 합니다: ${normalizedHex}`);
- }

  const r = parseHexValueStr(normalizedHex.slice(0, 2));
  const g = parseHexValueStr(normalizedHex.slice(2, 4));
  const b = parseHexValueStr(normalizedHex.slice(4, 6));

-  if ([r, g, b].some(value => Number.isNaN(value) || !isRGBDecimalValue(value))) {
-    throw new Error(`잘못된 hex값 입니다: ${hex}`);
-  }

  return `rgba(${r},${g},${b},${alpha})`;
}

@ssi02014 Hello! First, the content you've suggested looks entirely valid :) Initially, I added features trying not to significantly alter the existing codebase structure. However, if it's possible to make changes for better functionality, it seems appropriate to modify it as you suggested. Additionally, thank you for letting me know that I am gradually changing from using Korean in slashes to English, and that I am incrementally changing existing code written in Korean!

Therefore, as you suggested, I have modified the code and further enhanced it by:

  • Removing the remaining Korean from the test code.
  • Writing tests for a broader range of edge cases.

These changes will enhance the readability of the code and make it easier for developers to understand by clearly defining the cases I support. Thank you for your suggestion!

@ssi02014
Copy link
Contributor

@BO-LIKE-CHICKEN
Cool! It looks much better to me! 🚀
But in the end, it needs a review by a maintainer

Copy link
Collaborator

@raon0211 raon0211 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems more accurate. Thanks!

Copy link

vercel bot commented May 31, 2024

@raon0211 is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

@raon0211 raon0211 merged commit 3853784 into toss:main May 31, 2024
5 of 6 checks passed
@BO-LIKE-CHICKEN BO-LIKE-CHICKEN deleted the feat/hexToRgba branch May 31, 2024 09:06
@ssi02014
Copy link
Contributor

@BO-LIKE-CHICKEN Cool!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants