최  호민

최 호민

1660730533

SvelteKit으로 URL Shortener를 구축하는 방법

이 튜토리얼은 SvelteKit으로 URL Shortener를 구축하는 방법을 보여줍니다. SvelteKit 엔드포인트를 사용하여 요청을 리디렉션합니다. 그러면 소스 URL이 대상 또는 대상 URL로 리디렉션됩니다.
 

URL 단축기, 기억하기 쉬운 링크를 공유하고 싶을 때 사용하세요. Bitly, TinyURL 또는 이미 나와 있는 다른 서비스 를 사용할 수 있습니다 . 또는 사용하고 싶은 것으로 만들고 직접 만들어 연결을 더 많이 가질 수 있습니다!

과거에는 Netlify _redirects파일과 Vercel 파일로 개인 URL 단축기를 만들었습니다 vercel.json. 이 포스트에서는 SvelteKit으로 URL 단축기를 만들 것입니다.

SvelteKit 엔드포인트를 사용하여 요청을 리디렉션합니다. 그러면 sourceURL이 대상 또는 destinationURL로 리디렉션됩니다.

예를 들어 이 프로젝트에 지정된 URL이 될 수 있습니다 https://svort.li. TLD( .li) 이후의 모든 것은 해당 소스의 URL sourcehttps://svort.li/me리디렉션됩니다 .destinationhttps://scottspence.com

내가 만든 이전 두 프로젝트에서는 서버에서 리디렉션을 수행하기 위한 구성 파일일 뿐이므로 프론트 엔드 프레임워크를 방해하는 요소가 없었습니다.

이것은 서버(SvelteKit 끝점에서)에서 들어오는 요청을 받아 리디렉션하는 것과 여전히 거의 동일합니다.

프로젝트 설정

다음 명령을 사용하여 스켈레톤 SvelteKit을 스캐폴딩하겠습니다.

npm init svelte@next svort-urls

나는 지시를 따를 것이고, 거기에 있는 모든 지시에 응할 것입니다. 어느 것.

? Which Svelte app template? › - Use arrow-keys. Return to submit.
    SvelteKit demo app
❯   Skeleton project

✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … Yes
✔ Add ESLint for code linting? … Yes
✔ Add Prettier for code formatting? … Yes
✔ Add Playwright for browser testing? … Yes

끝점 만들기

폴더 에 routes[slug].ts파일을 생성하겠습니다.

touch src/routes/'[slug]'.ts

파일 은 [slug].ts끝점, 끝점에서 HTTP 메서드를 사용할 수 있는 SvelteKit의 HTTP 끝점입니다. 따라서 GET경로의 일부 데이터가 필요한 경우 이러한 특수 SvelteKit 파일을 통해 액세스할 수 있습니다.

이 경우 로 리디렉션될 수 GET있도록 메서드 를 사용하고 있습니다 .sourcedestination

export const get = async () => {
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

이것 은 루트 경로 ( /) 이후 의 모든 것을 수락 하고 현재 홈페이지 로 다시 리디렉션 합니다 /.

따라서 로 localhost:3000/me리디렉션됩니다 localhost:3000/.

그 정도야!

링크 목록의 경우 로컬 구성 파일을 사용하지만 CMS 또는 데이터베이스와 같은 것을 사용하여 이를 제어할 수 있습니다.

소스 및 도착 URL 추가

소스 및 대상 URL을 구성 파일에 추가하겠습니다. SvelteKit에서 이 위치는 lib폴더에 있습니다.

# create the lib folder
mkdir src/lib
# create a file for the urls
touch src/lib/urls-list.ts

파일 에 urls-list.ts내가 원하는 소스 및 도착 URL을 추가하고 여기에 몇 가지 예를 추가하겠습니다.

export const urls = [
  {
    source: '/me',
    destination: 'https://scottspence.com',
  },
  {
    source: '/twitter',
    destination: 'https://twitter.com/spences10',
  },
  {
    source: '/git',
    destination: 'https://github.com/spences10',
  },
]

도착 URL로 리디렉션

짧은 링크 목록이 있으면 [slug].ts끝점에서 사용할 수 있습니다. localhost:3000/me이제 로 리디렉션을 원할 것 입니다 https://scottspence.com.

끝점에 있는 소스 URL이 무엇인지 알 수 있는 방법이 필요하므로 끝점에 전달된 컨텍스트에서 이를 구조화할 수 있습니다.

context(또는 ctx) 객체 에서 무엇을 얻었는지 간단히 살펴보겠습니다 .

export const get = async ctx => {
  console.log(ctx)
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

이제 다음으로 이동 localhost:3000/something하면 터미널에 다음 출력이 표시됩니다.

{
  request: Request {
    size: 0,
    follow: 20,
    compress: true,
    counter: 0,
    agent: undefined,
    highWaterMark: 16384,
    insecureHTTPParser: false,
    [Symbol(Body internals)]: {
      body: null,
      stream: null,
      boundary: null,
      disturbed: false,
      error: null
    },
    [Symbol(Request internals)]: {
      method: 'GET',
      redirect: 'follow',
      headers: [Object],
      parsedURL: [URL],
      signal: null,
      referrer: undefined,
      referrerPolicy: ''
    }
  },
  url: URL {
    href: 'http://localhost:3000/something',
    origin: 'http://localhost:3000',
    protocol: 'http:',
    username: '',
    password: '',
    host: 'localhost:3000',
    hostname: 'localhost',
    port: '3000',
    pathname: '/something',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  },
  params: { slug: 'something' },
  locals: {},
  platform: undefined
}

여기서 제가 관심을 갖는 것은 url객체, 보다 구체적으로 url.pathname. 이렇게 하면 요청을 리디렉션할 위치를 식별하는 데 도움이 됩니다.

url: URL {
  href: 'http://localhost:3000/something',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/something',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

나는 또한 params.slug이것을 위해 객체를 사용할 수도 있습니다.

params: { slug: 'something' },

이 예에서는 url개체를 사용하겠습니다. 따라서 url컨텍스트 개체에서 개체를 구조화하고 urls-list파일을 가져옵니다.

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

그런 다음 urls배열에서 리디렉션을 가져올 수 있습니다. 이것을 [redirect]변수로 선언하겠습니다.

그래서 지금의 내용을 로그아웃하면 무엇을 얻을 수 있는지 알 수 있습니다 . from 파일 [redirect]과 일치하는 모든 항목을 필터링하고 싶으 므로 지금 은 결과를 표시하겠습니다.url.pathnameurls-listconsole.log

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  const [redirect] = urls.filter(item => {
    console.log(item)
  })

  return {
    headers: { Location: '/' },
    status: 301,
  }
}

이제 로 이동 localhost:3000/something하면 터미널에 다음이 표시됩니다.

{ source: '/me', destination: 'https://scottspence.com' }
{ source: '/twitter', destination: 'https://twitter.com/spences10' }
{ source: '/git', destination: 'https://github.com/spences10' }

달콤한! 이제 일부 논리를 사용 하여 배열 url.pathname에 있는 것과 일치하는지 확인할 수 있습니다.urls

따라서 item필터에서 사용하고 있는 것과 비교할 수 있습니다 url.pathname. 유효한 일치 항목이 있으면 배열 destination에서 가져올 수 있습니다.urls

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  const [redirect] = urls.filter(item => item.source === url.pathname)

  if (redirect) {
    return {
      headers: { Location: redirect.destination },
      status: 301,
    }
  } else if (!redirect && url.pathname.length > 1) {
    return {
      headers: { Location: '/' },
      status: 301,
    }
  } else return {}
}

if유효한 일치를 확인 하는 데 사용할 수 있습니다 . 유효한 일치 항목이 있으면 배열 에서 로 설정 headers.Location합니다 .destinationurls

일치하지 않으면 홈페이지( /)로 리디렉션하고 빈 개체를 반환하는 최종 catch를 갖습니다.

결론

그게 다야! 들어오는 URL을 가져와 대상 URL로 리디렉션하는 SvelteKit에서 간단한 리디렉션을 만들었습니다.

이제 홈페이지를 내 짧은 URL의 방문 페이지로 사용할 수 있으므로 사이트를 방문하는 모든 사람이 사용 가능한 링크를 확인할 수 있습니다.

https://scottspence.com 의 원본 기사 출처

#sveltekit #svelte 

What is GEEK

Buddha Community

SvelteKit으로 URL Shortener를 구축하는 방법

How to Get Current URL in Laravel

In this small post we will see how to get current url in laravel, if you want to get current page url in laravel then we can use many method such type current(), full(), request(), url().

Here i will give you all example to get current page url in laravel, in this example i have used helper and function as well as so let’s start example of how to get current url id in laravel.

Read More : How to Get Current URL in Laravel

https://websolutionstuff.com/post/how-to-get-current-url-in-laravel


Read More : Laravel Signature Pad Example

https://websolutionstuff.com/post/laravel-signature-pad-example

#how to get current url in laravel #laravel get current url #get current page url in laravel #find current url in laravel #get full url in laravel #how to get current url id in laravel

Spammers Smuggle LokiBot Via URL Obfuscation Tactic

Spammers have started using a tricky URL obfuscation technique that sidesteps detection – and ultimately infects victims with the LokiBot trojan.

The tactic was uncovered in recent spear-phishing emails with PowerPoint attachments, which contain a malicious macro. When the PowerPoint file is opened, the document attempts to access a URL via a Windows binary (mshta.exe), and this leads to various malware being installed onto the system.

This process is not unusual for macro downloaders. However, because the domains associated with the campaign are already known to host malicious files and data, the attackers used a unique semantic attack on the campaign’s URLs to trick the email recipient and avoid being flagged by email and AV scanners. A semantic URL attack is when a client manually adjusts the parameters of its request by maintaining the URL’s syntax – but altering its semantic meaning. More on that, below.

“We found it interesting that the attackers were using URIs in this way, which essentially is an attack on the user’s preconceived notion of what a URI should look like,” said researchers with Trustwave in a Thursday report. “It may also defeat security solutions, which may be expecting URIs in a certain format.”

The malicious email that was observed by researchers is titled: “URGENT: REQUEST FOR OFFER (University of Auckland)” and the attached PowerPoint is titled “Request For Offer.” The University of Auckland is a public research university in Auckland, New Zealand. Threatpost has reached out to Trustwave for further details on the targeting and lure of this attack.

Obfuscation Tactic

It’s important to distinguish between a URL versus URI here. A URI is an identifier of a specific resource, such as a page, book or a document. A URL, meanwhile, is the most common type of URI that also tells users how to access it (such as HTTPs or FTP).

A URI is made up of a scheme, host and path. The scheme identifies the protocol to be used to access the resource on the internet, while the host identifies the host that holds the resource, and the path identifies the specific resource in the host that the web client wants to access.

The spammers behind this attack have horned in on one component of the URI scheme called an Authority component, which holds an optional user-information part. If the “userinfo” subcomponent is present, it is preceded by two slashes and followed by an “@” character. An example of this Authority structure is as follows: authority = [userinfo@]host[:port].

Because “userinfo” is not commonly used, it is sometimes ignored by servers, researchers said. In this specific campaign, attackers took advantage of this fact, utilizing what researchers called a “dummy” userinfo in order to hide their true intent.

#malware #web security #lokibot malware #malicious email #powerpoint attachment #semantic #trustwave #uri #url #url obfuscation #url syntax #windows binary

Raleigh  Hayes

Raleigh Hayes

1626904440

Firebase URL Shortener Tutorial

Hey everyone :) This week’s video is about making a super simple URL shortener using firebase hosting. This was inspired by https://github.com/kentcdodds/netlify-shortener. I hope you enjoy it!

Useful Links:
https://github.com/redhwannacef/firebase-shortener-tutorial

#url #firebase #firebase url #firebase url shortener

최  호민

최 호민

1660730533

SvelteKit으로 URL Shortener를 구축하는 방법

이 튜토리얼은 SvelteKit으로 URL Shortener를 구축하는 방법을 보여줍니다. SvelteKit 엔드포인트를 사용하여 요청을 리디렉션합니다. 그러면 소스 URL이 대상 또는 대상 URL로 리디렉션됩니다.
 

URL 단축기, 기억하기 쉬운 링크를 공유하고 싶을 때 사용하세요. Bitly, TinyURL 또는 이미 나와 있는 다른 서비스 를 사용할 수 있습니다 . 또는 사용하고 싶은 것으로 만들고 직접 만들어 연결을 더 많이 가질 수 있습니다!

과거에는 Netlify _redirects파일과 Vercel 파일로 개인 URL 단축기를 만들었습니다 vercel.json. 이 포스트에서는 SvelteKit으로 URL 단축기를 만들 것입니다.

SvelteKit 엔드포인트를 사용하여 요청을 리디렉션합니다. 그러면 sourceURL이 대상 또는 destinationURL로 리디렉션됩니다.

예를 들어 이 프로젝트에 지정된 URL이 될 수 있습니다 https://svort.li. TLD( .li) 이후의 모든 것은 해당 소스의 URL sourcehttps://svort.li/me리디렉션됩니다 .destinationhttps://scottspence.com

내가 만든 이전 두 프로젝트에서는 서버에서 리디렉션을 수행하기 위한 구성 파일일 뿐이므로 프론트 엔드 프레임워크를 방해하는 요소가 없었습니다.

이것은 서버(SvelteKit 끝점에서)에서 들어오는 요청을 받아 리디렉션하는 것과 여전히 거의 동일합니다.

프로젝트 설정

다음 명령을 사용하여 스켈레톤 SvelteKit을 스캐폴딩하겠습니다.

npm init svelte@next svort-urls

나는 지시를 따를 것이고, 거기에 있는 모든 지시에 응할 것입니다. 어느 것.

? Which Svelte app template? › - Use arrow-keys. Return to submit.
    SvelteKit demo app
❯   Skeleton project

✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … Yes
✔ Add ESLint for code linting? … Yes
✔ Add Prettier for code formatting? … Yes
✔ Add Playwright for browser testing? … Yes

끝점 만들기

폴더 에 routes[slug].ts파일을 생성하겠습니다.

touch src/routes/'[slug]'.ts

파일 은 [slug].ts끝점, 끝점에서 HTTP 메서드를 사용할 수 있는 SvelteKit의 HTTP 끝점입니다. 따라서 GET경로의 일부 데이터가 필요한 경우 이러한 특수 SvelteKit 파일을 통해 액세스할 수 있습니다.

이 경우 로 리디렉션될 수 GET있도록 메서드 를 사용하고 있습니다 .sourcedestination

export const get = async () => {
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

이것 은 루트 경로 ( /) 이후 의 모든 것을 수락 하고 현재 홈페이지 로 다시 리디렉션 합니다 /.

따라서 로 localhost:3000/me리디렉션됩니다 localhost:3000/.

그 정도야!

링크 목록의 경우 로컬 구성 파일을 사용하지만 CMS 또는 데이터베이스와 같은 것을 사용하여 이를 제어할 수 있습니다.

소스 및 도착 URL 추가

소스 및 대상 URL을 구성 파일에 추가하겠습니다. SvelteKit에서 이 위치는 lib폴더에 있습니다.

# create the lib folder
mkdir src/lib
# create a file for the urls
touch src/lib/urls-list.ts

파일 에 urls-list.ts내가 원하는 소스 및 도착 URL을 추가하고 여기에 몇 가지 예를 추가하겠습니다.

export const urls = [
  {
    source: '/me',
    destination: 'https://scottspence.com',
  },
  {
    source: '/twitter',
    destination: 'https://twitter.com/spences10',
  },
  {
    source: '/git',
    destination: 'https://github.com/spences10',
  },
]

도착 URL로 리디렉션

짧은 링크 목록이 있으면 [slug].ts끝점에서 사용할 수 있습니다. localhost:3000/me이제 로 리디렉션을 원할 것 입니다 https://scottspence.com.

끝점에 있는 소스 URL이 무엇인지 알 수 있는 방법이 필요하므로 끝점에 전달된 컨텍스트에서 이를 구조화할 수 있습니다.

context(또는 ctx) 객체 에서 무엇을 얻었는지 간단히 살펴보겠습니다 .

export const get = async ctx => {
  console.log(ctx)
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

이제 다음으로 이동 localhost:3000/something하면 터미널에 다음 출력이 표시됩니다.

{
  request: Request {
    size: 0,
    follow: 20,
    compress: true,
    counter: 0,
    agent: undefined,
    highWaterMark: 16384,
    insecureHTTPParser: false,
    [Symbol(Body internals)]: {
      body: null,
      stream: null,
      boundary: null,
      disturbed: false,
      error: null
    },
    [Symbol(Request internals)]: {
      method: 'GET',
      redirect: 'follow',
      headers: [Object],
      parsedURL: [URL],
      signal: null,
      referrer: undefined,
      referrerPolicy: ''
    }
  },
  url: URL {
    href: 'http://localhost:3000/something',
    origin: 'http://localhost:3000',
    protocol: 'http:',
    username: '',
    password: '',
    host: 'localhost:3000',
    hostname: 'localhost',
    port: '3000',
    pathname: '/something',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  },
  params: { slug: 'something' },
  locals: {},
  platform: undefined
}

여기서 제가 관심을 갖는 것은 url객체, 보다 구체적으로 url.pathname. 이렇게 하면 요청을 리디렉션할 위치를 식별하는 데 도움이 됩니다.

url: URL {
  href: 'http://localhost:3000/something',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/something',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

나는 또한 params.slug이것을 위해 객체를 사용할 수도 있습니다.

params: { slug: 'something' },

이 예에서는 url개체를 사용하겠습니다. 따라서 url컨텍스트 개체에서 개체를 구조화하고 urls-list파일을 가져옵니다.

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

그런 다음 urls배열에서 리디렉션을 가져올 수 있습니다. 이것을 [redirect]변수로 선언하겠습니다.

그래서 지금의 내용을 로그아웃하면 무엇을 얻을 수 있는지 알 수 있습니다 . from 파일 [redirect]과 일치하는 모든 항목을 필터링하고 싶으 므로 지금 은 결과를 표시하겠습니다.url.pathnameurls-listconsole.log

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  const [redirect] = urls.filter(item => {
    console.log(item)
  })

  return {
    headers: { Location: '/' },
    status: 301,
  }
}

이제 로 이동 localhost:3000/something하면 터미널에 다음이 표시됩니다.

{ source: '/me', destination: 'https://scottspence.com' }
{ source: '/twitter', destination: 'https://twitter.com/spences10' }
{ source: '/git', destination: 'https://github.com/spences10' }

달콤한! 이제 일부 논리를 사용 하여 배열 url.pathname에 있는 것과 일치하는지 확인할 수 있습니다.urls

따라서 item필터에서 사용하고 있는 것과 비교할 수 있습니다 url.pathname. 유효한 일치 항목이 있으면 배열 destination에서 가져올 수 있습니다.urls

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  const [redirect] = urls.filter(item => item.source === url.pathname)

  if (redirect) {
    return {
      headers: { Location: redirect.destination },
      status: 301,
    }
  } else if (!redirect && url.pathname.length > 1) {
    return {
      headers: { Location: '/' },
      status: 301,
    }
  } else return {}
}

if유효한 일치를 확인 하는 데 사용할 수 있습니다 . 유효한 일치 항목이 있으면 배열 에서 로 설정 headers.Location합니다 .destinationurls

일치하지 않으면 홈페이지( /)로 리디렉션하고 빈 개체를 반환하는 최종 catch를 갖습니다.

결론

그게 다야! 들어오는 URL을 가져와 대상 URL로 리디렉션하는 SvelteKit에서 간단한 리디렉션을 만들었습니다.

이제 홈페이지를 내 짧은 URL의 방문 페이지로 사용할 수 있으므로 사이트를 방문하는 모든 사람이 사용 가능한 링크를 확인할 수 있습니다.

https://scottspence.com 의 원본 기사 출처

#sveltekit #svelte 

App to app redirects with custom URL schemes

In this episode, you’ll learn how to handle app-to-app redirects using custom URL schemes with the stripe-ios client library so that you can accept payment methods which require redirection.

Table of contents

00:00 Introduction
01:24 How to create the custom URL scheme
02:11 Using the onOpenURL handler
03:18 Handle Stripe redirects

#url schemes #url